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>

thats not the issue I was just pointing that out, [see here](https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html) — zgood, Mar 13 '18 at 19:01

score 2 · Accepted Answer · answered Mar 13 '18 at 18:59

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>

One `.find()` can change the entire code.. Thanks. Thank you so much — Codecraker, Mar 13 '18 at 19:01

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

1 Answers1