0
我从数据库(州和城市)中的两个两个表格创建两个下拉字段。城市表格与每个州相关联。我使用php将这两个表中的数据转换为Json。我使用Ajax来填充选择下拉列表。现在,我想在用户从状态下拉菜单中选择一个状态时过滤城市下拉菜单。我使用下面的代码,它工作正常,除了在每个填充的选项字段之后添加一个空选项字段。任何帮助?如何使用Ajax一次性填充两个下拉列表
function State() {
$('#statedd1').empty();
$('#statedd1').append("<option value='0'>- Select State -</option>");
$('#citydd1').append("<option value='0'>- Select City -</option>");
$.ajax({
type:"GET",
url:"states.php",
contentType:"application/json; charset=utf-8",
dataType:"json",
success: function(data) {
$('#statedd1').empty();
$('#statedd1').append("<option value='0'>- Select State -</option>");
$.each(data,function (index, item) {
$('#statedd1').append('<option value="'+ item.State_ID +'">'+ item.State_Name +'<option>');
});
},complete: function() {}
});
}
function City(State_ID) {
$('#citydd1').empty();
$('#citydd1').append("<option>Loading...</option>");
$.ajax({
type:"GET",
url:"cities.php?Id="+State_ID,
contentType:"application/json; charset=utf-8",
dataType:"json",
success: function(data) {
$('#storedd1').empty();
$('#storedd1').append("<option value='0'>- Select City -</option>");
$.each(data,function (index, item) {
$('#citydd1').append('<option value="'+ item.CityID +'">'+ item.CityName +'<option>');
});
},complete: function() {}
});
}
$(document).ready(function() {
State();
$("#statedd1").change(function() {
var State_ID = $("#statedd1").val();
City(State_ID);
});
});
<p><select id="statedd1"></select></p>
<br><br>
<p><select id="citydd1" multiple></select></p>
哇哦!那是@Martin Julyan。非常感谢。只是一件小事,我一直在努力弄清楚我的代码有什么问题。哈哈哈 –