[英]jQuery selector add a string ,but selected get undefined value
As the code below, they actually have 5 school drop-down and 5 departments drop-down list. 如下代码所示,他们实际上有5个学校下拉列表和5个部门下拉列表。 So, it'll have five id, which is school_1
, school_2
, school_3
...so on. 因此,它将具有五个id,分别是school_1
, school_2
, school_3
...等等。 The options are all same in these five school drop-down, same value, same text. 这五个学校下拉菜单中的选项都相同,值相同,文本相同。
The department drop-down( id="dept_x"
) would show different departments list which belongs to the school that I selected in school drop-down list. 部门下拉列表( id="dept_x"
)将显示属于我在学校下拉列表中选择的学校的不同部门列表。
The school_1
connect with dept_1
,and school_2
connect with dept_2
and ...so on. 该school_1
与连接dept_1
,并school_2
与连接dept_2
等等...。
Now, I have a problem with getting value in selected. 现在,我在选择价值方面遇到问题。 The code var school_code = $("#school_" + num).val();
代码var school_code = $("#school_" + num).val();
in the jQuery. 在jQuery中。 I always get value undefined
. 我总是得到undefined
价值。
if I use selector "#school_1
or "#school_2
or other else, instead of "#school_" + num
,then it would work perfectly. 如果我使用选择器"#school_1
或"#school_2
或其他“,而不是"#school_" + num
,那么它将完美地工作。 It all do the same thing, so I choose to use for loop. 它们都做同样的事情,所以我选择使用for循环。
How do I fix this? 我该如何解决? or other better way? 还是其他更好的方法?
Thank you so much! 非常感谢!
The example HTML: 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>
The jQuery: 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.
});
}
I would suggest you to use a common class ie school
to bind the change
event handler. 我建议您使用一个普通的类,即school
来绑定change
事件处理程序。 As store the arbitrary data in data-*
custom attribute which can be fetched using .data(key)
. 将任意数据存储在data-*
自定义属性中,可以使用.data(key)
进行获取。 Additionally .empty()
can be used to remove all child nodes. 另外, .empty()
可用于删除所有子节点。
HTML 的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>
Script 脚本
$(".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.
});
Scope. 范围。
The value of your variable 'num' is read inside the .change()
call - at that point, it will always be 5. Consider the pseudo-code version: 变量'num'的值在.change()
调用中读取-那时,它将始终为5。考虑一下伪代码版本:
Fix this by using this
inside the handler: 通过在处理程序中使用this
解决此问题:
var school_code = $(this).val();
You'll have to do something similar for dept. 您必须为部门做类似的事情。
You need to use a closure to ensure the num
value within the change
event handler is what you expect it to be, and not the last value in the array - as the for
loop will have finished long before any change
event has fired. 您需要使用闭包来确保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)
}
That being said you can massively improve the logic by using common classes and a single event handler. 话虽这么说,您可以通过使用通用类和单个事件处理程序来大大改善逻辑。 You can then use DOM traversal from the first select
to find the related select
. 然后,您可以从第一个select
使用DOM遍历来找到相关的select
。 This will completely remove the need for the loop. 这将完全消除对循环的需要。 Try this: 尝试这个:
$('.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.