在进行下拉选择之前隐藏字段的搜索框

时间:2012-11-23 作者:HaneD

我有一个搜索小部件,其中有一个下拉列表,其中填充了我的自定义分类法。我需要一个其他输入字段,以便仅在选择某个分类法或其子分类法时显示。

在你说这只是一个问题之前,请先告诉我。我想我需要用Walker\\u categorhydropdown编辑wp\\u dropdown\\u categories(),以便在标记中添加数据select=“select1”。

我发现this 做我想要的事情的代码,我只是不知道如何实现它。

HTML(已更新以反映我的代码):

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

.hidden {
 display:none;   
}
jquery(使用我的测试类别进行测试时,更新到现在的工作位置):

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

3 个回复
最合适的回答,由SO网友:HaneD 整理而成

我为感兴趣的人提供的完整工作代码

    <?php 
    // Equipment Category Dropdown, thanks https://gist.github.com/2902509
    class Walker_SlugValueCategoryDropdown extends Walker_CategoryDropdown {

            function start_el(&$output, $category, $depth, $args) {
            $pad = str_repeat(\'&nbsp;\', $depth * 3);
            $cat_name = apply_filters(\'list_cats\', $category->name, $category);
            //$output .= "<select name=\'exc_equipment_cat\' id=\'exc_equipment_cat\' class=\'postform\' data-select=\'select1\'>";
            $output .= "\\t<option class=\\"level-$depth\\" value=\\"".$category->slug."\\"";
            if ( $category->term_id == $args[\'selected\'] )
                $output .= \' selected="selected"\';
            $output .= \'>\';
            $output .= $pad.$cat_name;
            if ( $args[\'show_count\'] )
                $output .= \'&nbsp;&nbsp;(\'. $category->count .\')\';
            $output .= "</option>\\n";
            //$output .= "</select>";
        }
    }

    add_action( \'widgets_init\', \'register_equipment_search\' );

    function register_equipment_search() {
        register_widget( \'Equipment_Search\' );
    }
    //add_action("widgets_init", array(\'Equipment_Search\', \'register\'));
    class Equipment_Search extends WP_Widget {

        function Equipment_Search() {
            $widget_ops = array( \'classname\' => \'agriquip\', \'description\' => __(\'Displays the Equipment Search Form\', \'agriquip\') );
            $control_ops = array( \'width\' => 200, \'height\' => 350, \'id_base\' => \'agriquip-widget\' );
            $this->WP_Widget( \'agriquip-widget\', __(\'Equipment Search\', \'agriquip\'), $widget_ops, $control_ops );
        }

        function widget( $args, $instance ) {
            extract( $args );

            $title = apply_filters(\'widget_title\', $instance[\'title\'] );
            $tract_id = isset( $instance[\'kwtax\'] ) ? $instance[\'kwtax\'] : false;   
            $tract = wp_list_pluck(get_terms(\'exc_equipment_cat\', array(\'parent\' => $tract_id)), \'slug\');
            $tractparent = get_term_by(\'id\', $tract_id , \'exc_equipment_cat\');
            $tractparent = $tractparent->slug; 


            echo $before_widget;

            // Display the widget title
            if ( $title )
                echo $before_title . $title . $after_title;

            ?>
            <div>
            <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();
                         }
                    });
                });
                var values = <?php echo json_encode($tract); ?>;
                values.push ("<?php echo $tractparent; ?>");
                jQuery(\'.postform\').change(function(){
                    var j = jQuery(this);
                    if(values.indexOf(j.val()) >= 0) {
                        jQuery(\'.kw\').attr(\'data-select\', \'select1\' + j.val());
                    }
                });
            });
            </script>
            <form role="search" method="get" id="equipfilter" action="<?php bloginfo(\'url\'); ?>/">
                <fieldset>
                    <?php
                    echo \'KW Category Id\' .$tract_id;
                        $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 );

                        $select = wp_dropdown_categories($dropdown_args);
                        $select = preg_replace("#<select([^>]*)>#", "<select$1 data-select=\'select1\'>", $select);
                        echo $select;
                        ?>
                </fieldset>
                <fieldset class="kw" data-select="select1">
                    <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></div>

            <?php

            echo $after_widget;
        }

        function update( $new_instance, $old_instance ) {
            $instance = $old_instance;

            //Strip tags from title and name to remove HTML 
            $instance[\'title\'] = strip_tags( $new_instance[\'title\'] );
            $instance[\'kwtax\'] = strip_tags( $new_instance[\'kwtax\'] );

            return $instance;
        }

        function form( $instance ) {

            //Set up some default widget settings.
            $defaults = array( \'title\' => __(\'Equipment Search\', \'agriquip\'), \'kwtax\' => \'\');
            $instance = wp_parse_args( (array) $instance, $defaults );
            ?>
            <p>
                <label for="<?php echo $this->get_field_id( \'title\' ); ?>"><?php _e(\'Title:\', \'agriquip\'); ?></label>
                <input id="<?php echo $this->get_field_id( \'title\' ); ?>" name="<?php echo $this->get_field_name( \'title\' ); ?>" value="<?php echo $instance[\'title\']; ?>" class="widefat" />
            </p>

              <p>
                <select id="<?php echo $this->get_field_id(\'kwtax\'); ?>" name="<?php echo $this->get_field_name(\'kwtax\'); ?>" class="widefat" style="width:100%;">
                    <?php foreach(get_terms(\'exc_equipment_cat\',\'parent=0&hide_empty=0\') as $term) { ?>
                    <option <?php selected( $instance[\'kwtax\'], $term->term_id ); ?> value="<?php echo $term->term_id; ?>"><?php echo $term->name; ?></option>
                    <?php } ?>      
                </select>
            </p>

    <?php
      }
    }
    ?>

SO网友:HaneD

要将数据选择添加到选择标记,请使用

 <?php 
   $select = wp_dropdown_categories($dropdown_args); 
   $select = preg_replace("#<select([^>]*)>#", "<select$1 data-select=\'select1\'>", $select); 
   echo $select; 
 ?>
然后将$dropdown\\u args中的echo更改为0。

我将把问题的jquery部分带到正确的平台

SO网友:HaneD

为了隐藏kw字段,我只使用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>

结束

相关推荐

未在HTTPS下加载重力表单,未定义jQuery

我在Wordpress网站上使用重力表单,目前为止效果不错。问题是我已经使页面安全(https/SSL),这使得表单无法工作。问题似乎是站点如何加载jQuery。页面上有23个JS错误,这似乎是由于jQuery加载失败造成的\"Uncaught ReferenceError: jQuery is not defined\". 如果转到源代码试图提取jQuery文件的页面,您将看到错误:https://code.jquery.com/jquery-1.7.1.min.js?ver=3.4.2错误截图:点击放