javascript - 如何根据 jQuery 中先前的选择标签获取特定的选择选项？

Question

当我选择 SCIENCE 作为先前的选择标签时，我希望在选择选项中获得诸如 PCMB 和 PCMC 之类的选项，而当我选择时什么也没有商业。

<div class="row Time">
    <div class="col-md-4 col-sm-4">
        <p>Course<span class="astric">*</span></p>
        <select class="Academic">
            <option value="">Select</option>
            <option value="" id="Science">Science</option>
            <option value="" id="Commerce">Commerce</option>
            <option value="" id="Arts">Arts</option>
        </select>
    </div>
    <div class="col-md-4 col-sm-4">
        <p>Branch<span class="astric">*</span></p>
        <select class="Academic">
            <option value="" id="Select">Select</option>
            <option value="" id="PCMB">PCMB</option>
            <option value="" id="PCMC">PCMC</option>
            <option value="" id="PCMS">PCMS</option>
        </select>
    </div>
    <div class="col-md-4 col-sm-4">
        <p>Year<span class="astric">*</span></p>
        <select class="Academic">
            <option value="">Select</option>
            <option value="" id="01">01</option>
            <option value="" id="02">02</option>
        </select>
    </div>
</div>

Answer 1

您必须对代码进行一些更改才能达到您想要的结果。

1. 如果您只想在用户选择特定值后才显示第二个选择框，则不应在最初将其包含在 DOM 中。

2. 您必须向所选选项添加值

3. 您的类别或 ID 到您的选择框

4. 使用 Jquery .on('change') 函数来完成您想要的结果

使用下面的代码作为进一步引用。

var selectLevelTwo = '<div class="col-md-4 col-sm-4 select-level-two"><p>Branch<span class="astric">*</span></p><select class="Academic"><option value="" id="Select">Select</option><option value="" id="PCMB">PCMB</option><option value="" id="PCMC">PCMC</option><option value="" id="PCMS">PCMS</option></select></div>';

$(document).on('change', '.select-level-one', function(){
  var firstSelectValue = $('.select-level-one option:selected').val();
  if(firstSelectValue == 'science'){
  $(this).parent().after(selectLevelTwo);
  } else {
  $('.select-level-two').fadeOut('fast');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row Time">
                <div class="col-md-4 col-sm-4">
                   <p>Course<span class="astric">*</span></p>
                   <select class="Academic select-level-one">
                   <option value="">Select</option>
                   <option value="science" id="Science">Science</option>
                   <option value="commerce" id="Commerce">Commerce</option>
                   <option value="arts" id="Arts">Arts</option>
                   </select>
               </div>
               
              <div class="col-md-4 col-sm-4">
              <p>Year<span class="astric">*</span></p>
              <select class="Academic">
              <option value="">Select</option>
              <option value="" id="01">01</option>
              <option value="" id="02">02</option>
              </select>
           </div>
    </div>

希望这有帮助