[Closed] Javascript for conditional filtering

[Author]

Posts

[harpalS]

Tell us what you are trying to do?

Hide search filters based on other search filter selections. These filters are based on taxonomies.

Code as below

<select name="wpv-genre" class="js-wpv-filter-trigger form-control">
<option selected="selected" value="0">All</option>
<option value="thriller">thriller</option>
<option value="comedy">comedy</option>
</select>

<div class="form-group"><label class="wpv-custom-search-filter__label" for="format">Formats</label>
<!-- ## --><span class="wpv-custom-search-filter__input">
<select name="wpv-format" class="js-wpv-filter-trigger form-control">
<option selected="selected" value="0">All</option>
<option value="written">Written</option>
</select></span></div>

The below code is the Javascript that should work but it hides all search boxes as they are all styled with the div class="form-group".

Is there a way I can amend the below so that the var element only focuses on the var element with the label class for "format" rather than all div class which = "form-group"

var element = document.querySelector("div.form-group");

document.querySelector('select[name=wpv-genre]').addEventListener('change', function(){
if(this.value == 'thriller')
element.style.display = 'none';
else
element.style.display = 'block';
})

[Raja Mohammed]

Hello there,

I would recommend consider using jQuery parent function to target the form-group div wrapper based on the selector.

(function($) {
$(document).on('change','select[name="wpv-genre"]',function(){
 if($(this).val() == 'thriller') {
 $('select[name="wpv-format"]).parent('div.form-group').hide();
 }
else{
  $('select[name="wpv-format"]).parent('div.form-group').show();
}

}
})(jQuery);

Reference : hidden link

Regards
Raja

[harpalS]

Hi there,

Unfortunately, the jQuery had no effect.

The full html for the site search filters is below:

<div class="wp-block-group"><div class="wp-block-group__inner-container"></div></div>

<div class="wp-block-toolset-views-custom-search-filter wpv-custom-search-filter wpv-custom-search-filter-label-top alignleft" data-toolset-views-custom-search-filter="1168e349606b2f669de6232a2eec50c9"><div><div class="form-group"><label class="wpv-custom-search-filter__label" for="class">Genre</label><!-- ## --><span class="wpv-custom-search-filter__input"><select name="wpv-genre" class="js-wpv-filter-trigger form-control"><option selected='selected' value="0">All</option><option value="thriller">Thriller</option><option value="comedy">  -Comedy</option></select></span></div></div></div>

<div class="wp-block-toolset-views-custom-search-filter wpv-custom-search-filter wpv-custom-search-filter-label-top alignleft" data-toolset-views-custom-search-filter="dbc38c6ca99216b2af43df4cd2c711e7"><div><div class="form-group"><label class="wpv-custom-search-filter__label" for="format">Format</label><!-- ## --><span class="wpv-custom-search-filter__input"><select name="wpv-format" class="js-wpv-filter-trigger form-control"><option selected='selected' value="0">All</option><option value="written">Written</option></select></span></div></div></div>

Please let me know why the jQuery won't work for the above html or if there is an alternative. Thanks

[Raja Mohammed]

Sorry there was a minor syntax error in the JS snippet a missing Quote. can you please try the JS snippet below . If the still doesn't work please share the URL where the form can be seen so that i can try the working the code.

(function($) {
$(document).on('change','select[name="wpv-genre"]',function(){
 if($(this).val() == 'thriller') {
 $('select[name="wpv-format"]').parent('div.form-group').hide();
 }
else{
  $('select[name="wpv-format"]').parent('div.form-group').show();
}
 
}
})(jQuery);