第三级选择下拉菜单在第一次下拉和第二个下拉跌倒选择值更改时无法更改

Question

i创建了3个选择表单，其值应根据第一个选择更改。例如，展示该国家/地区的选择国家和州。显示选定状态和城市。但是，我发现的现实是，当我测试此代码时，国家在更改国家时发生了变化。但是，当状态更改时，城市无法填充任何东西。但是，如果我选择在状态中设置默认值并首先更改它，则将生成城市。但是，当我从国家启动这一点时，然后纽约市就会失败。以下是代码：我看不出有什么问题。

<script type="text/javascript">
$(document).ready(function(){
    $("select.country_id").change(function(){
        var selectedCountry = $(".country_id option:selected").val();
        $.ajax({
            type: "POST",
            url: "location_state_processor.php",
            data: { country_id : selectedCountry } 
        }).done(function(data){
            $("#responsestate").html(data);
        });
    });
    $("select.state_id").change(function(){
        var selectedState = $(".state_id option:selected").val();
        $.ajax({
            type: "POST",
            url: "location_city_processor.php",
            data: { state_id : selectedState } 
        }).done(function(data){
            $("#responsecity").html(data);
        });
    });
});
</script>
<div id="responsecountry">
<select name="country_id" class="country_id select" title="Select Country"><option value="0">Select Country</option><option value="1">Afghanistan</option><option value="2">Albania</option>
<option value="3">Algeria</option>
<option value="4">American Samoa</option>
<option value="5">Andorra</option><option value="6">Angola</option>
<option value="7">Anguilla</option>
<option value="8">Antarctica</option>
</select></div>

<div id="responsestate"><select class="state_id select" name="state_id"> 
       <option value="0">--Select State--</option><option value="5303">Barisal</option><option value="1161">Chittagong</option><option value="1162">Dhaka</option><option value="1163">Khulna</option><option value="1164">Rajshahi</option><option value="5304">Sylhet</option></select></div>


<div id="responsecity"><select class="city_id select" name="city_id"> 
<option value="0">--Select City--</option>
<option value="19081">Ackley</option>
<option value="19082">Ackworth</option>
<option value="18035">Adair</option>
<option value="19131">Adel</option>
</select></div>

Answer 1

尝试以下代码：

<div id="responsestate"><select class="state_id select" name="state_id" onchange="fetchCities(this)">
    <option value="0">--Select State--</option>
    <option value="5303">Barisal</option>
    <option value="1161">
        Chittagong
    </option>
    <option value="1162">Dhaka</option>
    <option value="1163">Khulna</option>
    <option value="1164">Rajshahi</option>
    <option value="5304">Sylhet</option>
</select></div>


function fetchCities(ele){
    state_id = $(ele).val();
    $.ajax({
            type: "POST",
            url: "location_city_processor.php",
            data: { state_id : selectedState };
            success: function(responseData, textStatus, jqXHR) {
                results = responseData.results;
                $("#responsecity").html(data);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(jqXHR, errorThrown);
            }
        });
}

Answer 2

我曾经遇到过类似的问题。虽然我正在使用AngularJS。问题之所以如此，是因为您将响应与HTML绑定在一起。最好将此更改功能写入控制器，然后将响应存储在某些数组中。然后在HTML中选择选项中的数组。也将遵循同样的城市。