基于选项选择的表单动作更改仅在家庭中有效

Question

我正在为我正在研究的WordPress项目创建自定义搜索表单。 searchform.php代码如下所示：

<form role="search" method="get" id="searchform" class="searchform col-md-4" >
    <input type="search" value="<?php echo get_search_query(); ?>" name="term" id="s" class="form-control" placeholder="Find Freelancers & Agencies">
    <select id="search-options">
        <option>Select...</option>
        <option value="Projects">Projects</option>
        <option value="Freelancers">Freelancers</option>
    </select>
</form>

基本上，我想根据用户选择的选项来更改表单的操作。我为此使用以下脚本：

jQuery(document).ready(function(){

jQuery("#search-options").change(function(){
 // change fn on dept id
 var selected_opt = $(this).children(":selected").text(); // Get the selected option value

 switch(selected_opt){
 case "Projects":
    jQuery("#searchform").attr('action', '/advanced-search/');
 break;

 case "Freelancers":
    jQuery("#searchform").attr('action', '/service-provider-search/');
 break;

 default:
    jQuery("#searchform").attr('action', '#');
 // Default action
 }
});
});

脚本已正确排队在我的functions.php文件中。

尽管我在首页上可以正常运行，但在其他页面上却无法正常运行。当我在其他页面上使用搜索表单时，结果URL为http://example.com/page/?term=search_term

有什么建议吗？

Answer 1

对于任何想知道的人，这是第3行中的错字。由于已知的兼容模式限制，使用jQuery在WordPress中进行开发时，所有“ $”符号都应为“ jQuery”。

此行：

 var selected_opt = $(this).children(":selected").text(); // Get the selected option value

应该是这样：

 var selected_opt = jQuery(this).children(":selected").text(); // Get the selected option value