php - 提交时转到 URL 的下拉菜单

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

Capture the form submit.

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

OR (and I like this better) update the form action:

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

... so the form submits to that url.

Answer 2

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

$(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; 
    }); 
});