Question

我有一个WordPress高级搜索，当用户从下拉菜单中选择适用的类别时，它会将它们导航到该建议的类别。我希望它能够在提交时将它们带到该类别，而不是在选择该选项后自动执行该类别。这是我的JS代码：

$(function(){ // bind change event to select 
    $('#dynamic_select').on('change', function () { 
        var url = $(this).val(); // get selected value 
        if (url) { // require a URL 
            window.location = url; 
        } return false; 
    }); 
}); 

$(function(){ // bind change event to select 
    $('#dynamic_select2').on('change', function () { 
        var url = $(this).val(); // get selected value 
        if (url) {  // require a URL 
            window.location = url; 
        } return false; 
    }); 
});

这是我的HTML：

<form class="treatment-form-procedure">

<label class="selectstyle" id="treatment-procedure-select" style="margin-top:10px;">
    <select id="dynamic_select">
        <option selected>Select One</option>
        <option class="level-0" value="<?php bloginfo('url'); ?>/treatment/medical-dermatology/">Medical Dermatology</option>
    </select>
</label>

<input type="submit" value="Search" id="treatmentSubmit" style="padding: 10px 7px;" />

Answer 1

只需删除dynamic_select的javascript处理程序，表单将不再提交。。。您可以删除或注释掉的代码是：

$(function(){ // bind change event to select 
    $('#dynamic_select').on('change', function () { 
        var url = $(this).val(); // get selected value 
        if (url) { // require a URL 
            window.location = url; 
        } return false; 
    }); 
});

Answer 2

捕获表单提交。

$('form.treatment-form-procedure').on('submit', function (event) {
    event.preventDefault();
    window.location = $('#dynamic_select').val();
});

OR （我更喜欢这样）更新表单操作：

$('#dynamic_select').on('change', function () {
    $(this).closest('form').attr('action', $(this).val());
});

...所以表单提交给该网址。

下拉菜单在提交时转到URL

2 个答案: