当第一个和第二个下拉菜单选择值更改时，第三级选择下拉菜单无法更改答案

【问题标题】：Third level Select Drop-down fails to change when first and second drop downs select value changes当第一个和第二个下拉菜单选择值更改时，第三级选择下拉菜单无法更改
【发布时间】：2017-12-18 18:40:37
【问题描述】：

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

<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>

【问题讨论】：

您是否验证了data 您正在到达那里？另外，能否检查一下控制台是否有错误？
嗨@NisargShah 我该怎么做？是的，没有控制台错误
你可以在这里找到一些基础知识：developer.mozilla.org/en-US/docs/Mozilla/Debugging/…
我敢打赌，当您用新数据填充第二个更改事件时，它不会执行。当其值更改时，即选择标签的情况时，则调用更改事件。尝试在第一个更改事件中的$.done() 函数末尾手动调用$("select.state_id").change()。
@Glubus 当我更改 state 的值时，是否不应该触发第二个更改事件，即使 state 现在在更改国家/地区时生成了新数据？你的建议我都试过了，没用

标签： jquery html ajax

【解决方案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);
            }
        });

}

【讨论】：

这将起作用，除非在状态更改时生成onchange="fetchCities(this)" 不起作用
状态更改不起作用是什么意思？上面的代码假设适用于选择下拉列表的更改事件。无论如何它应该可以工作。

【解决方案2】：

我曾经遇到过类似的问题。虽然我使用的是 angularjs。问题来了，因为您正在使用 html 绑定响应。您最好在控制器中编写此更改函数并将响应存储在某个数组中。然后在您的选项中迭代数组在 html 中选择。获取城市也是如此。

【讨论】：