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">

這是js：

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中，然后將$作為參數傳遞，這將是使$可用的便捷方法。在noconflict模式下使用jQuery。

最后，正如@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));