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

我根据下拉选择创建了一个自动填充输入字段。我的问题是第二个选择框没有填充相应的输入字段。我知道这是错误的，因为select1中的ID是相同的，但我如何才能使其工作？我需要创建大约20个或更多的选择下拉列表，但我不知道如何修复它

$'coursecode'.changefunction{ var myValue=$this.val； var myText=$coursecode:selected.text； 如果myText！=&myText===11111{ $coursename.valWeb-Dev； $prerequesite.valNone； $units.val3； } 否则，如果myText！=&myText===22222{ $coursename.valMath； $prerequesite.valNone； $units.val3； } 如果myText！=&myText===33333，则为else{ $coursename.valEnglish； $prerequesite.valNone； $units.val3； } 如果myText！=&myText===44444，则为else{ $Coursenae.valPsychology； $prerequesite.valNone； $units.val3； } }; 请选择。。。 11111 22222 33333 44444 请选择。。。 11111 22222 33333 44444

---

你可以这样做

<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>

---

小提琴-

你可以这样做

<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>

---

fiddle-

当第二次选择更改逻辑时，它们是否会相同？想法是选择多个课程代码。例如，一名新生正在注册，他需要10门课程才能注册。然后，他需要选择10个课程代码，并自动填充信息。我只是使用了一个下拉菜单和自动填充，这样学生就不必手动键入所有数据。当第二次选择更改逻辑时，它们是否会相同？想法是选择多个课程代码。例如，一名新生正在注册，他需要10门课程才能注册。然后，他需要选择10个课程代码，并自动填充信息。我只是使用了一个下拉菜单和自动填充，这样学生就不必手动键入所有数据。这不是自动填充。应该自动填充的内容我想输入字段@WEREBERYes，而不是输入字段应该是自动填充的。我尝试了你的代码，但它不会自动填充输入字段。你能给我一个工作JSFIDLE的链接吗？@WEREBER请检查我的答案添加了FIDLE和更新的答案谢谢，这很有效。但如果我需要根据选择更改前提条件和单位数量，该怎么办？并非所有科目都有3个单元，有些科目有先决条件。很抱歉，一开始我不清楚。它不是自动填充的。应该自动填充什么？我想输入字段@WEREBERYes。它不是输入字段应该自动填充。我尝试了你的代码，但它不会自动填充输入字段。你能给我一个工作JSFIDLE的链接吗？@WEREBER请检查我的答案添加了FIDLE和更新的答案谢谢，这很有效。但如果我需要根据选择更改前提条件和单位数量，该怎么办？并非所有科目都有3个单元，有些科目有先决条件。对不起，一开始我不清楚。