jQuery class doesn't add on changing the option of a select box

Question

I have attributes (color, size) and their units(black,blue || 32cm,42cm). I want when selecting the color from the select box it should open the first unit's select box (black, blue) and when to click on size then it should open the 2nd select box (32cm,42cm). I've done almost everything but not been able to get the expected result.

 $(document).ready(function(){ //attr selector with options of units $('.attr-selector').change(function(){ var data = $(this).children().attr('data-link'); $('.unit-select').removeClass('active'); $('#'+data).addClass('active'); }); }); 

  .unit-select{ display: none; } .unit-select.active{ display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <!--*** ATTR ****--> <div class="col-2"> <div class="form-group"> <select class="form-control attr-selector"> <option>Select</option> <option value="" data-link="1"><b>Color</b></option> <option value="" data-link="2"><b>Size</b></option> <option value="" data-link="3"><b>Space</b></option> </select> </div> </div> <!--***Units Of attr 1***--> <div class="col-2 unit-select" id="1"> <div class="form-group"> <select class="form-control"> <option value=""><b>Red</b></option> <option value="" ><b>Green</b></option> <option value=""><b>Blue</b></option> </select> </div> </div> <!--***Units Of attr 2***--> <div class="col-2 unit-select" id="2"> <div class="form-group"> <select class="form-control"> <option value=""><b>32</b></option> <option value="" ><b>40</b></option> <option value=""><b>42</b></option> </select> </div> </div> <!--***Units Of attr 3***--> <div class="col-2 unit-select" id="3"> <div class="form-group"> <select class="form-control"> <option value=""><b>Color</b></option> <option value="" ><b>Size</b></option> <option value=""><b>Space</b></option> </select> </div> </div> </div> 

Answer 1

You need to target only the selected option and its corresponding data-attr.

 $(document).ready(function(){ //attr selector with options of units $('.attr-selector').change(function(){ var data = $(this).find('option:selected').attr('data-link'); $('.unit-select').removeClass('active'); $('#'+data).addClass('active'); }); }); 

  .unit-select{ display: none; } .unit-select.active{ display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <!--*** ATTR ****--> <div class="col-2"> <div class="form-group"> <select class="form-control attr-selector"> <option>Select</option> <option value="" data-link="1"><b>Color</b></option> <option value="" data-link="2"><b>Size</b></option> <option value="" data-link="3"><b>Space</b></option> </select> </div> </div> <!--***Units Of attr 1***--> <div class="col-2 unit-select" id="1"> <div class="form-group"> <select class="form-control"> <option value=""><b>Red</b></option> <option value="" ><b>Green</b></option> <option value=""><b>Blue</b></option> </select> </div> </div> <!--***Units Of attr 2***--> <div class="col-2 unit-select" id="2"> <div class="form-group"> <select class="form-control"> <option value=""><b>32</b></option> <option value="" ><b>40</b></option> <option value=""><b>42</b></option> </select> </div> </div> <!--***Units Of attr 3***--> <div class="col-2 unit-select" id="3"> <div class="form-group"> <select class="form-control"> <option value=""><b>Color</b></option> <option value="" ><b>Size</b></option> <option value=""><b>Space</b></option> </select> </div> </div> </div>