У меня есть виджет на моем сайте WordPress, который ищет мои пользовательские таксономии. Форма поиска также имеет 4 других варианта: минимальная и максимальная цена и мин. И макс. КВт. Я хочу скрыть поле ввода min и max kw, если не выбрана определенная опция или ее дети. Моя форма работает только для того, чтобы получить 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="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(); } }); }); });
Чтобы скрыть поле, если выбрана другая категория, измените код на:
<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(); к коду.
Чтобы использовать только 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>