根据下拉选项自动填充输入字段

Question

我基于下拉选项创建了自动填充输入字段。我的问题是第二个选择框没有填充相应的输入字段。我知道这是错误的，因为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