javascript - jQuery 选择器添加一个字符串，但选择得到未定义的值

Question

如下代码，他们实际上有5个学校下拉列表和5个部门下拉列表。因此，它将有五个 id，分别是 school_1、school_2、school_3...等等。这五个学校下拉列表中的选项都是相同的，相同的值，相同的文本。

部门下拉列表(id="dept_x")会显示属于我在学校下拉列表中选择的学校的不同部门列表。

school_1连接到dept_1，school_2连接到dept_2，等等。

现在，我在获取 selected 值时遇到了问题。 jQuery 中的代码 var school_code = $("#school_"+ num).val();。我总是得到值 undefined。

如果我使用选择器 "#school_1 或 "#school_2 或其他，而不是 "#school_"+ num ，那么它会完美地工作。它们都做同样的事情，所以我选择使用 for 循环。

我该如何解决这个问题？或者其他更好的方法？

非常感谢!

示例 HTML:

<select id="school_1" name="school_1" class="form-control">
    <option value="1001">school-A</option>
    <option value="1002">school-B</option>
    <option value="1003">school-C</option>
    <option value="1004">school-D</option>
</select>

<select id="dept_1" name="dept_1" class="form-control"></select>

jQuery:

var school_num = '5';   //the value 5 is comes from a php variable and it's a string.
for(var num = 1; num <= parseInt(school_num); num++){

    num = String(num);
    //console.log("#school_" + num);

    $("#school_" + num).change(function(){
    $("#dept_" + num + " > option").remove();

        var school_code = $("#school_" + num).val();
        console.log(school_code);

        //then doing ajax to get department data in the database.

    });
}

Answer 1

我建议您使用一个通用类，即 school 来绑定(bind) change 事件处理程序。将任意数据存储在 data-* 自定义属性中，可以使用 .data(key) 获取.另外.empty()可用于删除所有子节点。

HTML

<select name="school_1" class="form-control school" data-id="1">
    <option value="1001">school-A</option>
    <option value="1002">school-B</option>
    <option value="1003">school-C</option>
    <option value="1004">school-D</option>
</select>

脚本

$(".school").change(function(){
    var num = $(this).data('id');
    var dept = $("#dept_" + num);

    //remove options
    dept.empty();

    var school_code = $(this).val();
    console.log(school_code);

    //then doing ajax to get department data in the database.
});