我正在为我正在研究的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
有什么建议吗?
对于任何想知道的人,这是第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