javascript - 基于两个下拉菜单的 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 中并将 $ 作为参数传递可以是一种方便的方法如果您需要在无冲突模式下使用 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));