Question

我正在我的数据库（州和城市）的两个表中创建两个下拉字段。 Cities表链接到每个州。我使用php将数据从两个表转换为Json。我也使用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>

Answer 1

我认为你错过了第二个选项标签中的/＆lt; /选项＆GT;在你的追加行

如何使用Ajax一次填充两个下拉列表

1 个答案: