我在我的WordPress网站上有一个小部件,可以搜索我的自定义分类。搜索表单还有4个其他选项:最低和最高价格以及最低和最高功率。除非选择了特定的选项或其子选项,否则我希望隐藏最低和最高功率输入字段。我的表单可以工作,只需要实现jQuery。
我不懂jQuery,但我找到了这个解决方案,只是不确定如何实现它。
我的表单:
<form role="search" method="get" id="equipfilter" action="<?php bloginfo('url'); ?>/">
<fieldset>
<?php
$dropdown_args = array(
'taxonomy' => 'exc_equipment_cat',
'name' => 'exc_equipment_cat',
'show_count' => 1,
'orderby' => 'name',
'hierarchical' => true,
'echo' => 0,
'walker' => new Walker_SlugValueCategoryDropdown
);
/*
wp_dropdown_categories( $dropdown_args );
*/?>
<?php
$select = wp_dropdown_categories($dropdown_args);
$select = preg_replace("#<select([^>]*)>#", "<select$1 data-select='select1'>", $select);
echo $select;
?>
</fieldset>
<fieldset class="hidden" data-select="NOT SURE WHAT TO PUT HERE">
<legend>Kw Range:</legend>
<input type="text" name="kw_min" placeholder="min" value><br />
<input type="text" name="kw_max" placeholder="max" value>
</fieldset>
<fieldset>
<legend>Price Range:</legend>
<input type="text" name="pr_min" placeholder="from" value><br />
<input type="text" name="pr_max" placeholder="to" value>
</fieldset>
<input type="submit" id="filtersubmit" value="Search" />
</form>
jQuery(已更新到测试类别时正常工作,现在我只需要弄清楚这个<fieldset class="hidden" data-select="不确定要放什么">
):
jQuery(function ($){
$(function(){
$('.postform').change(function() {
var selectData = $(this).attr("data-select");
var selectValue = $(this).val();
if($("fieldset[data-select='" + selectData + selectValue +"']").css("display") == "none"){
$("fieldset[data-select^='" + selectData + "']").hide();
$("fieldset[data-select='" + selectData + selectValue +"']").show();
}
});
});
});
$(function(){ $('.postform').change(function() { var selectData = $(this).attr("data-select"); var selectValue = $(this).val(); if($("fieldset[data-select='" + selectData + selectValue +"']").css("display") == "none"){ $("fieldset[data-select^='" + selectData + "']").hide(); $("fieldset[data-select='" + selectData + selectValue +"']").show(); } }); });
现在当我选择我的测试类别时,该字段会显示。只需弄清如何与子代一起使用。 - HaneD