Search box with field hidden till drop down selection is made

问题

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

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

My form:

<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>

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();
             }
        });
    });
});

回答1:

To hide the field if another category is selected change the code to:

<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>

Added $('.hidden').hide(); to the code.

回答2:

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>

来源：https://stackoverflow.com/questions/13526454/search-box-with-field-hidden-till-drop-down-selection-is-made

标签

php

jquery

wordpress

onchange

html-select