Выбранные значения опций выпадающего списка не собираются jQuery

Question

У меня есть простая двухпадающая форма, которая должна быть перенаправлена ​​на основе данных значений при выпадающем списке.

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

Вам не нужно проверять выбранную опцию. Просто получите значение select. Метод 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(); 

Вы делаете эти строки сразу в начале документа готов. Таким образом, их ценность будет такой, какой бы они ни находились при загрузке страницы. Они не переоцениваются по логике щелчка. Переместите их в свою логику щелчка, если вы хотите получить значения, как они есть во время щелчка.