1つのページに複数のドロップダウンメニューを表示するJavascript/jquery

Question

1つのページで複数のドロップダウンに同じjavascript/jqueryを使用するにはどうすればよいですか？私はIDかクラスで選択しますか？私はオプションを選択すると、ページが正しいURLにリダイレクト持って使用する必要がありますどのようなジャバスクリプト/ jqueryの

<select id="drop1"> 
<option value="#">Option 1</option> 
<option value="#">Option 2</option> 
<option value="#">Option 3</option> 
</select> 

<select id="drop2"> 
<option value="#">Option 1</option> 
<option value="#">Option 2</option> 
<option value="#">Option 3</option> 
</select> 

：

これらは、1と同じページがありますか？機能は両方のドロップダウンで同じでなければならないが、それぞれ固有のIDを持つ。私はドロップダウン（一意のIDの代わりに）両方のメソッドに同じクラスを使用することに反対していません。

Answer 1

動作が同じ場合は、個々のIDのリスナーを作成するか、同じクラスを使用してそのクラスにリスナーを追加します。コードが重複しないように、私はクラスアプローチを提案します。

<select id="drop1" class="urlRedirect"> 
    <option selected disabled>--Select--</option> 
    <option value="page1">Option 1</option> 
    <option value="page2">Option 2</option> 
    <option value="page3">Option 3</option> 
</select> 

<select id="drop2" class="urlRedirect"> 
    <option selected disabled>--Select--</option> 
    <option value="page4">Option 1</option> 
    <option value="page5">Option 2</option> 
    <option value="page6">Option 3</option> 
</select> 

そしてjqueryの：

$('select.urlRedirect').change(function() { 
    //alert($(this).val()); 
    //window.location.href=$(this).val(); to open in same page 
    window.open(
    $(this).val(), 
    '_blank' // <- This is what makes it open in a new window. 
); 
}); 

の作業jsfiddle：https://jsfiddle.net/aarbor989/y0yjouo0/

Answer 2

最も簡単な方法は、SELECTの "のonchange" イベントを使用することです。 jQueryや "id"属性を使う必要はありません。

<select id="drop1" onchange="launch(this)"> 
    <option value="/drop1opt1.html">Option 1</option> 
    <option value="/drop1opt2.html">Option 2</option> 
    <option value="/drop1opt3.html">Option 3</option> 
</select> 

<select id="drop2" onchange="launch(this)"> 
    <option value="/drop2opt1.html">Option 1</option> 
    <option value="/drop2opt2.html">Option 2</option> 
    <option value="/drop2opt3.html">Option 3</option> 
</select> 

次に、単純なjavascript関数を作成して、ウィンドウの位置プロパティを変更します。

function launch(opt) { 
    window.location = opt.value; 
} 

希望します。