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

Question

作为下面的代码，它们实际上有5个学校下拉派和5个部门下拉列表。因此，它将具有五个ID，即school_1，school_2，school_3 ...等等。选项在这五个学校下拉列表中都是相同的，相同的价值，相同的文本。

部门下拉（id="dept_x"）将显示我在学校下拉列表中选择的学校的不同部门列表。

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

现在，我在选择中获得价值有问题。jQuery中的代码var school_code = $("#school_" + num).val();。我总是得到值undefined。

如果我使用选择器"#school_1或"#school_2或其他选择，而不是"#school_" + num，则它将完美地工作。这一切都做同样的事情，所以我选择用于循环。

我该如何解决？还是其他更好的方法？

非常感谢！

示例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绑定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.
});

Answer 2

范围。

您变量'num'的值在.change()呼叫中读取 - 此时，它将始终为5。考虑伪代码版本：

• 循环通过每个元素，1-5
• 分配更改处理程序
• 结束循环
• 稍后：更改处理程序命中-NUM是5

通过在处理程序内使用this解决此问题：

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

您必须为部门做类似的事情。

Answer 3

您需要使用闭合来确保change事件处理程序中的num值是您所期望的，而不是数组中的最后一个值 - 因为for循环将具有完成任何change事件之前完成长。

var school_num = '5';
for(var num = 1; num <= parseInt(school_num, 10); num++){
    (function(num) {
        $("#school_" + num).change(function(){
            $("#dept_" + num + " > option").remove();
            var school_code = $("#school_" + num).val();
            //then doing ajax to get department data in the database.
       });  
    })(num)
}

说，您可以使用普通类和单个事件处理程序大大改善逻辑。然后，您可以使用第一个select的DOM Traversal找到相关的select。这将完全消除循环的需求。尝试以下操作：

$('.school').change(function() {
  var $dept = $(this).next('.dept').empty()
  var school_code = $(this).val();
  console.log(school_code)
  //then doing ajax to get department data in the database.
  $dept.append('<option>Foo</option>'); // just an example
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="school" 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 class="dept" name="dept_1" class="form-control"></select>
<select class="school" name="school_2" 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 class="dept" name="dept_2" class="form-control"></select>