ドロップダウンの選択されたオプションの値が取得されていませんjQuery

Question

私は、ドロップダウンの与えられた値に基づいてリダイレクトする必要がある単純な2つのドロップダウンフォームを持っています。リダイレクトのみドロップダウン（または選択したオプションブラウザウィンドウ負荷）の最初のオプションに拾っ何らかの理由で

jQuery(document).ready(function(){ 
 

 
\t var location = jQuery('#Location option:selected').val(); 
 
\t var style = jQuery('#Style option:selected').val(); 
 
\t 
 
    \t jQuery('#DropSearch').click(function (e){ 
 
     e.preventDefault(); 
 
     e.stopPropagation(); 
 
    \t window.location.href = 'http://showroomworldwide.com/?geodir_search=1&stype=gd_place&s=' + location + '&stype=gd_place&s=' + style; 
 
\t }); 
 
});

<form id="CustomSearch"> 
 
<select id="Location"> 
 
\t \t <option value='northeast'>North East</option> 
 
\t \t <option value='west'>West</option> 
 
\t \t <option value='midwest'>Mid West</option> 
 
\t \t <option value='south'>South</option> 
 
\t </select> 
 

 
\t <select id="Style"> 
 
\t \t <option value='industrial'>Industrial</option> 
 
\t \t <option value='farmhouse'>Farmhouse</option> 
 
\t \t <option value='contemporary'>Contemporary</option> 
 
\t \t <option value='beach+style'>Beach Style</option> 
 
\t \t <option value='traditional'>Tradtional</option> 
 
\t </select> 
 

 
\t <button id="DropSearch"> 
 
<i class="fa fa-search" aria-hidden="true"></i></button> 
 
</form>

......任意のアイデア理由としてこれは事件です？ http://showroomworldwide.com/のURLをご覧ください。

Answer 1

選択したオプションをテストする必要はありません。選択した値を取得するだけです。 val()メソッドは、フィールドの現在の値をあなたに返し、その値は選択されたものになります。

ただし、これらの値は、ボタンがクリックされたときに取得する必要があります。

また、送信ボタンを使用していないため、キャンセルする必要があるネイティブ動作がないため、e.preventDefault()とe.stopPropagation()を削除できます。

$(function(){ 
 

 
    $('#DropSearch').click(function (e){ 
 
    
 
    // Now that the button has been clicked, just get the 
 
    // value of the elements. No need to get the selected option 
 
    var location = jQuery('#Location').val(); 
 
    var style = jQuery('#Style').val(); 
 
    
 
    // Test to see if the right choices were stored: 
 
    console.log(location, style); 
 
    
 
    window.location.href = 
 
     'http://showroomworldwide.com/?geodir_search=1&stype=gd_place&s=' + 
 
     location + '&stype=gd_place&s=' + style; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="CustomSearch"> 
 
<select id="Location"> 
 
\t \t <option value='northeast'>North East</option> 
 
\t \t <option value='west'>West</option> 
 
\t \t <option value='midwest'>Mid West</option> 
 
\t \t <option value='south'>South</option> 
 
\t </select> 
 

 
\t <select id="Style"> 
 
\t \t <option value='industrial'>Industrial</option> 
 
\t \t <option value='farmhouse'>Farmhouse</option> 
 
\t \t <option value='contemporary'>Contemporary</option> 
 
\t \t <option value='beach+style'>Beach Style</option> 
 
\t \t <option value='traditional'>Tradtional</option> 
 
\t </select> 
 

 
\t <button id="DropSearch"> 
 
<i class="fa fa-search" aria-hidden="true"></i></button> 
 
</form>

Answer 2

var location = jQuery('#Location option:selected').val(); 
var style = jQuery('#Style option:selected').val(); 

あなたは準備ができて、ドキュメントの開始時にすぐにこれらの行を行っています。したがって、その値はページの読み込みに関係なく変化しません。それらはクリックロジックで再評価されません。クリック時に値を取得する場合は、これらをクリックロジックに移動します。