Skip to content

Instantly share code, notes, and snippets.

@zdimaz
Created May 2, 2018 19:50
Show Gist options
  • Save zdimaz/6e8aa7c58444eeaa94fc6511aa5f7853 to your computer and use it in GitHub Desktop.
Save zdimaz/6e8aa7c58444eeaa94fc6511aa5f7853 to your computer and use it in GitHub Desktop.
Select open item (div)
<section>
<select id="selectOptions">
<option data-name="man">
man1
</option>
<option data-name="woman">
woman
</option>
<option data-name="child" selected>
child
</option>
</select>
<div class="dataTest" data-name="man">Hey Man</div>
<div class="dataTest" data-name="woman">Hello Woman</div>
<div class="dataTest" data-name="child">Hi Child</div>
</section>
var nameValue = $('#selectOptions option:selected').data('name');
$('.dataTest').hide().filter(function(){
return $(this).data('name') === nameValue
}).show();
$('#selectOptions').on('change', function() {
var nameValue = $('#selectOptions option:selected').data('name');
$('.dataTest').hide().filter(function(){
return $(this).closest("section").data('name') === nameValue
}).show();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment