第三级选择第一和第二个下拉选择值更改时,下拉选择无法更改

我创建了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>

回答:

试试下面的代码:

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

}

});

}

回答:

我都面临着类似的问题一次。 虽然我使用的是angularjs。 问题即将到来,因为您使用html绑定响应。 您最好在您的控制器中编写此更改函数,并将响应存储在某个数组中。 然后在你的html选项中迭代数组。 同样也会得到城市。

以上是 第三级选择第一和第二个下拉选择值更改时,下拉选择无法更改 的全部内容, 来源链接: utcz.com/qa/262285.html

回到顶部