Question

我根据下拉选项创建了一个自动填充输入字段。我的问题是第二个选择框没有填充相应的输入字段。我知道这是错的，因为来自select1的ID是相同的，但我怎样才能使它工作？我需要创建大约20个或更多选择下拉菜单，我无法弄清楚如何修复它。

＆＃13;

$('#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");
    }
});

＆＃13;

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

＆＃13;

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

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

1 个答案: