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番目の選択ボックスを含めないでください。あなたが希望する結果

の使用を達成するために、あなたの選択ボックス

使用のjQuery .on('change')機能にあなたの[オプション]を選択します

あなたのクラスまたはIDに値を追加する必要があります

詳細は以下のコードを参照してください。

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>

・ホープ、このヘルプ