具有隐藏字段的搜索框，直到进行下拉选择
具有隐藏字段的搜索框，直到进行下拉选择
提问于 2012-11-23 17:46:27
我在我的Wordpress网站上有小工具，可以搜索我的自定义分类法。搜索表单还有4个其他选项:最小和最大价格和最小和最大kw。我想隐藏最小和最大千瓦输入字段，除非选择了某个选项或其子选项。我的表单只需要实现jquery
我不知道jquery，但我已经找到了this solution，我只是不确定如何实现它。
我的表单：
<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="NOT SURE WHAT TO PUT HERE">)：
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();
}
});
});
});回答 2
Stack Overflow用户
回答已采纳
发布于 2012-11-26 15:27:07
要只使用jQuery来隐藏字段，请使用(如果Javascript被禁用，则隐藏字段将显示，并且您不会像使用css隐藏它时那样取消该选项)：
<script type="text/Javascript">
jQuery(function ($){
$(document).ready(function () {
$(".kw").hide();
});
$(function(){
$('.postform').change(function() {
var selectData = $(this).attr("data-select");
var selectValue = $(this).val();
$('.kw').hide();
if($("fieldset[data-select='" + selectData + selectValue +"']").css("display") == "none"){
$("fieldset[data-select^='" + selectData + "']").hide();
$("fieldset[data-select='" + selectData + selectValue +"']").show();
}
});
});
});
</script>Stack Overflow用户
发布于 2012-11-23 19:31:43
要在选择其他类别时隐藏该字段，请将代码更改为：
<script type="text/Javascript">
jQuery(function ($){
$(function(){
$('.postform').change(function() {
var selectData = $(this).attr("data-select");
var selectValue = $(this).val();
$('.hidden').hide();
if($("fieldset[data-select='" + selectData + selectValue +"']").css("display") == "none"){
$("fieldset[data-select^='" + selectData + "']").hide();
$("fieldset[data-select='" + selectData + selectValue +"']").show();
}
});
});
});
</script>将$('.hidden').hide();添加到代码中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13526454
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号