javascript - ドロップダウンの選択に基づく複数の送信ボタン

Question

初心者の質問... JavaScript が解決策になるかどうか疑問に思っていますか?

多数のオプションを含むドロップダウン メニューを使用することは可能ですか。次に、選択されたオプションに基づいて、2 つの送信ボタンのアクションを決定しますか?

この場合、ドロップダウンで選択したオプションに応じて、各送信ボタンがリンクされます...各ボタンのリンクは異なりますか?

Answer 1

ボタンの onClick メソッドに関連付けられた JavaScript 関数を使用しないのはなぜですか。次に、その関数内で、ドロップダウン リスト ボックスの現在の選択を照会し、適切なアクションを実行できますか?

Answer 2

はい、Jquery で簡単にできます。ドロップダウンの選択が行われた後、クリックイベントを送信ボタンに割り当てるだけです。

http://api.jquery.com/change/を見て、変更イベント ハンドラをドロップダウンに追加します。変更イベント ハンドラーで、送信ボタンの適切なクリック ハンドラーを設定します。

ここに例があります。 http://jsfiddle.net/24Vbr/6/

HTML

    <form>
      <input class="target" type="text" value="Field 1" />
        <select class="target">
          <option value="option1" selected="selected">Option 1</option>
          <option value="option2">Option 2</option>
        </select>  
      <button id='button1' type="button">Button with changing click handler based on dropdown </button>
    </form>
    <div id="other">
  Trigger the handler

---

js

var onSubmit1 = function()
{
    alert('submit1');
};

var onSubmit2 = function()
{
    alert('submit2');
};



$('.target').change(function(e) {    
    var dropdown = $('.target');
    var text = $( ".target option:selected" ).text();    

    var $button1= $('#button1');
    $button1.unbind('click');

    if(text == "Option 1"){
         $button1.click(onSubmit1);
        return;
    }

   $button1.click(onSubmit2);      
});