javascript - Hide all elements based on the item selected on dropdown -

here html:

<div id="drinks">     <select id="test">         <option data-tab="coffee">coffee</option>         <option data-tab="cold drinks">cold drinks</option>         <option data-tab="hot drinks">hot drinks</option>     </select>     <div class="section-wrapper">         <div class="row">             <section class="coffee">                 <h3>coffee </h3>                 <h4>coffee flavor</h4>             </section>         </div>         <div class="row">             <section class="cold drinks">                 <h3>cold drink</h3>                 <h4>cold drink</h4>             </section>         </div>         <div class="row">             <section class="hot drinks">                 <h3>hot drink</h3>                 <h4>hot drink</h4>             </section>         </div>     </div> </div> 

javascript code:

$(document).ready(function() {     $("#test").on('load change', function() {           $("#test option").each(function() {             $("#drinks ." + $(this).val()).hide();         })         $("#drinks ." + $(this).val()).show();     }).change(); }); 

i want show class matches dropdown data-tab value. if coffee selected coffee's h3 , h4 tag should displayed. other drop-down. doing wrong ? here link fiddle.

https://jsfiddle.net/mmaharjan/onbusdhv/

you need make markup changes make easy.

like use value in option store option's value, in section use attribute store type. if use value in options, can current value reading select's value. if use class in section [space] considered separator in class, cold drinks mean 2 classes cold , drinks, easy use attribute selector(though can use class attribute attribute selector, better use attribute)

$(document).ready(function() {    $("#test").on('load change', function() {      $('#drinks .section-wrapper > section').hide().filter('[data-type="' + $(this).val() + '"]').show();    }).change();  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="drinks">    <select id="test">      <option value="coffee">coffee</option>      <option value="cold drinks">cold drinks</option>      <option value="hot drinks">hot drinks</option>    </select>    <div class="section-wrapper">      <section data-type="coffee">        <h3>coffee </h3>        <h4>coffee flavor</h4>      </section>      <section data-type="cold drinks">        <h3>cold drink</h3>        <h4>cold drink</h4>      </section>      <section data-type="hot drinks">        <h3>hot drink</h3>        <h4>hot drink</h4>      </section>    </div>  </div>  </body>