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，那么它将完美地运作。这一切都做同样的事情，所以我选择使用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绑定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

您需要使用闭包来确保num事件处理程序中的change值与您期望的值相同，而不是数组中的最后一个值 - {{1}在任何for事件被触发之前，} loop将完成 long 。

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) }中的DOM遍历来查找相关的select。这将完全消除对循环的需要。试试这个：

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
});

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

3 个答案: