任务: 根据第一个列表中的选项动态创建第二个选择列表。出于测试目的，我附上了简单的场景。
HTML:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select[name='optionone']").on('change',function(){
var option = $("select[name='optionone']").val();
jQuery.ajax({
type: "GET",
url: "data.php",
data: "option="+option,
success: function(response){
$("#ajaxcall").html(response);
$("#ajaxcall").show();
}
});
});
$('#ajaxcall').on('change', function(){
$("select[name='optiontwo']").on('change', function () {
var optionone = $("select[name='optionone']").val();
var optiontwo = $("select[name='optiontwo']").val();
console.log(optionone +'|||'+ optiontwo)
$.ajax({
type: "GET",
url: "data.php",
data: "optionone="+optionone+"&optiontwo="+optiontwo,
success: function(response){
$("#ajaxcall").html(response);
$("#ajaxcall").show();
}
});
});
});
});
</script>
</head>
<body>
Option one:
<select name="optionone">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<div id="ajaxcall" style="display:none">
</div>
</body>
</html>
DATA.php
Option two:
<select name="optiontwo">
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
</select>
<?php var_dump($_GET) ?>
问题:
名为 optiontwo 的第二个列表将按应有的方式附加。但是，当我现在从中选择选项时，某些选项将起作用(例如 Option 5 和 Option 6)，而 Option 7 将不起作用(它不会进行 AJAX 调用)。我不知道是什么导致了这种行为。
我注意到，如果我从第二个列表中删除 AJAX 调用，并像这样添加 alert('changed'):
$('#ajaxcall').on('change', function(){
$("select[name='optiontwo']").on('change', function () {
alert('changed')
});
});
并多次更改optiontwo，然后它会调用几次alert。我也不知道这是否是正常行为。
问题: 如何让这个东西工作？
最佳答案
尝试为 optiontwo 选择使用 delegate 事件:-
<script type="text/javascript">
$(document).ready(function(){
$("select[name='optionone']").on('change',function(){
var option = $("select[name='optionone']").val();
jQuery.ajax({
type: "GET",
url: "data.php",
data: "option="+option,
success: function(response){
$("#ajaxcall").html(response);
$("#ajaxcall").show();
}
});
});
$('#ajaxcall').on('change', "select[name='optiontwo']", function () {
var optionone = $("select[name='optionone']").val();
var optiontwo = $("select[name='optiontwo']").val();
console.log(optionone +'|||'+ optiontwo)
$.ajax({
type: "GET",
url: "data.php",
data: "optionone="+optionone+"&optiontwo="+optiontwo,
success: function(response){
$("#ajaxcall").html(response);
$("#ajaxcall").show();
}
});
});
});
</script>
关于javascript - 动态添加的选择列表未按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34609249/