javascript - jQuery 类不会添加更改选择框的选项

Question

我有属性(颜色、大小)及其单位(黑色、蓝色 || 32cm、42cm)。 我希望从选择框中选择颜色时，它应该打开第一个单元的选择框(黑色、蓝色)，当单击尺寸时，它应该打开第二个选择框(32cm、42cm)。我几乎完成了所有工作，但未能获得预期的结果。

$(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

您只需定位选定的选项及其对应的数据属性。

$(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>