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>