ドロップダウンの選択に基づいて入力フィールドを自動入力する

Question

ドロップダウンの選択に基づいて入力フィールドを自動作成しました。私の問題は、2番目の選択ボックスが対応する入力フィールドに入力されていないことです。私はこれが間違っていることを知っているIDはselect1から同じですが、私はそれを動作させることができますか？私は約20以上の選択ドロップダウンを作成する必要があり、私はそれを修正する方法を見つけることができません。

$('#coursecode').change(function() { 
 
    var myValue = $(this).val(); 
 
    var myText = $("#coursecode :selected").text(); 
 

 
    if (myText != '' && myText === "11111") { 
 
     $("#coursename").val("Web Dev"); 
 
     $("#prerequesite").val("None"); 
 
     $("#units").val("3"); 
 
    } 
 
    else if (myText != '' && myText === "22222") { 
 
     $("#coursename").val("Math"); 
 
     $("#prerequesite").val("None"); 
 
     $("#units").val("3"); 
 
    } 
 
    else if (myText != '' && myText === "33333") { 
 
     $("#coursename").val("English"); 
 
     $("#prerequesite").val("None"); 
 
     $("#units").val("3"); 
 
    } 
 
    else if (myText != '' && myText === "44444") { 
 
     $("#coursename").val("Psychology"); 
 
     $("#prerequesite").val("None"); 
 
     $("#units").val("3"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="select1"> 
 
     <select id="coursecode" name="coursecode"> 
 
     <option value="">Please select...</option> 
 
     <option value="1">11111</option> 
 
     <option value="2">22222</option> 
 
     <option value="3">33333</option> 
 
     <option value="4">44444</option> 
 
     </select> 
 

 
     <input type="text" id="coursename" name="coursename" value="" readonly> 
 
     <input type="text" id="prerequesite" name="prerequesite" value="" readonly> 
 
     <input type="text" id="units" name="units" value="" readonly> 
 
    </div> 
 

 
    <div class="select2"> 
 

 
     <select id="coursecode" name="coursecode"> 
 
     <option value="">Please select...</option> 
 
     <option value="1">11111</option> 
 
     <option value="2">22222</option> 
 
     <option value="3">33333</option> 
 
     <option value="4">44444</option> 
 
     </select> 
 

 
     <input type="text" id="coursename" name="coursename" value="" readonly> 
 
     <input type="text" id="prerequesite" name="prerequesite" value="" readonly> 
 
     <input type="text" id="units" name="units" value="" readonly> 
 
    </div>

Answer 1

あなたはこの方法で行うことができます。

<div class="select1 select-div"><!--add class select-div--> 
    <select id="coursecode" name="coursecode"> 
     <option value="">Please select...</option> 
     <option value="1">11111</option> 
     <option value="2">22222</option> 
     <option value="3">33333</option> 
     <option value="4">44444</option> 
    </select> 

    <input type="text" id="coursename" name="coursename" value="" readonly> 
    <input type="text" id="prerequesite" name="prerequesite" value="" readonly> 
    <input type="text" id="units" name="units" value="" readonly> 
</div> 

<div class="select2 select-div"><!--add class select-div--> 

    <select id="coursecode" name="coursecode"> 
     <option value="">Please select...</option> 
     <option value="1">11111</option> 
     <option value="2">22222</option> 
     <option value="3">33333</option> 
     <option value="4">44444</option> 
    </select> 

    <input type="text" id="coursename" name="coursename" value="" readonly> 
    <input type="text" id="prerequesite" name="prerequesite" value="" readonly> 
    <input type="text" id="units" name="units" value="" readonly> 
</div> 
<script type="text/javascript"> 
$(function() { 
    $('.select-div').on('change', 'select', function (e) {//use on to delegate 
     var v = $(e.target).val(), t = $(e.target).find(':selected').text(), p = $(e.target).closest('.select-div'); 
     if (v) { 
      var c = (function(t) { 
       switch(t) { 
        case '11111' : return 'Web Dev'; 

        case '22222' : return 'Math'; 

        case '33333' : return 'English'; 

        case '44444' : return 'Psychology'; 
       } 
      })(t); 
      p.find('[name="coursename"]').val(c); 
      p.find('[name="prerequesite"]').val('None'); 
      p.find('[name="units"]').val('3'); 
     } 
    }); 
}); 
</script> 

フィドル - http://codepen.io/anon/pen/QpdZjJ?editors=1010#0