jQuery перенаправление на основе двух выпадающих списков

Question

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

Вот HTML:

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

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

<button id="DropSearch"> 

Вот это ЯШ:

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

jQuery(document).ready(function(){ 
    jQuery('#DropSearch').click(function (e){ 
     jQuery.post('http://showroomworldwide.com/?geodir_search=1&stype=gd_place&s=' + location + '&stype=gd_place&s=' + style); 
    }); 
}); 

После того, как скрипт будет добавлен в футере сайта, я получаю бесконечный цикл , почти как если бы функция срабатывала, прежде чем нажимать на кнопку.

Answer 1

Нет необходимости в том, что я вижу, чтобы делать запрос POST - просто установите window.location.href, также обернув ваш jQuery в IIFE, и передача $ в качестве аргумента может быть удобным способом сделать $ доступным вам, если вам нужно используйте jQuery в режиме noconflict.

Наконец, поскольку @ADyson упоминает, что вам нужно установить местоположение и стиль поиска в обработчике событий, иначе вы будете зацикливаться на начальных значениях.

(function($){ 
     $(document).ready(function(){ 
      var location = $('#Location').val(); 
      var style = $('#Style').val(); 
      $('#DropSearch').click(function (e){ 
       window.location.href = 'http://showroomworldwide.com/?geodir_search=1&stype=gd_place&s=' + location + '&stype=gd_place&s=' + style; // Can't just reference location.href due to local variable 
      }); 
     }); 
}(jQuery));