隐藏字段的搜索框，直到下拉选择为止 [英] Search box with field hidden till drop down selection is made

问题描述

我的Wordpress网站上有小部件，用于搜索我的自定义分类。搜索表单还有4个其他选项：最小和最大价格以及最小和最大kw。我想隐藏最小和最大kw输入字段，除非选择了某个选项或其子项。我的表单只需要实现jquery

I have widget on my Wordpress site which searches my custom taxonomies. The search form has 4 other options aswell: min and max price and min and max kw. I want to hide the min and max kw input field unless a certain option or its children are selected. My form works just need to get the jquery implemented

我不知道jquery但是我找到了这个解决方案，我只是不确定如何实现它。

I dont know jquery but I have found this solution, I'm just not sure how to implement it.

我的表格：

<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 =hiddendata-select =不确定要放在哪里> ）：

The jquery (Updated to where its working now when tested with test category, now I have just have to figure this out <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();
             }
        });
    });
});

推荐答案

仅使用jQuery隐藏字段使用（如果Javascript被禁用，然后隐藏字段将显示，你将不会像你用css隐藏它一样松开选项：

To only use jQuery to hide the field use (if Javascript is disabled then the hidden field will show and you wont loose the option as you would if you hid it with 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>

这篇关于隐藏字段的搜索框，直到下拉选择为止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！