我在PHP中使用AJAX构建了国家和城市下拉菜单。它们工作得很好。但问题是，我想如果选择任何国家，然后选择选项"please select"，城市选项也返回到"please select"
如何修改ajax代码做到这一点?
<script type="text/javascript">
// <![CDATA[
$(document).ready(function(){
$('#country').change(function(){ //any select change on the dropdown with id country trigger this code
$("#cities > option").remove(); //first of all clear select items
var country_id = $('#country').val(); // here we are taking country id of the selected one.
$.ajax({
type: "POST",
url: "get_cities/"+country_id, //here we are calling our user controller and get_cities method with the country_id
success: function(cities) //we're calling the response json array 'cities'
{
$.each(cities,function(id,city) //here we're doing a foeach loop round each city with id as the key and city as the value
{
var opt = $('<option />'); // here we're creating a new select option with for each city
opt.val(id);
opt.text(city);
$('#cities').append(opt); //here we will append these new select options to a dropdown with the id 'cities'
});
}
});
});
});
// ]]>
</script>
//下拉选择菜单
<label for="country">Country: </label>
<select id="country" name="country_id">
<option selected="selected" value="#">Please Select</option>
<?php foreach ($countries as $country) { ?>
<option value="<?= $country['id'] ?>"><?= $country['country_name'] ?></option>
<?php } ?>
</select>
<label for="city">City: </label>
<select id="cities" name="city_id">
<option selected="selected" value="#">Please Select</option>
<?php foreach ($cities as $city) { ?>
<option value="<?= $city['id'] ?>"><?= $city['city_name'] ?></option>
<?php } ?>
</select>
如果选择的选项是please select，请不要继续使用ajax和清除城市选项。
$('#country').change(function(){
var country_id = $(this).val();
if(country_id === '#') return; // return if selected country option is default.
// and rest of the code
$("#cities > option").remove();
});
我猜在您使用Ajax检索的城市列表中，您的第一个城市是"请选择"选项。否则，您应该添加Id值为0。这样，如果用户触发提交而不选择城市，您可以轻松过滤。
然后，回答你的问题。
<script type="text/javascript">
// <![CDATA[
$(document).ready(function(){
$('#country').change(function(){ //any select change on the dropdown with id country trigger this code
$("#cities > option").remove(); //first of all clear select items
var country_id = $('#country').val(); // here we are taking country id of the selected one.
$.ajax({
type: "POST",
url: "get_cities/"+country_id, //here we are calling our user controller and get_cities method with the country_id
success: function(cities) //we're calling the response json array 'cities'
{
$.each(cities,function(id,city) //here we're doing a foeach loop round each city with id as the key and city as the value
{
var opt = $('<option />'); // here we're creating a new select option with for each city
opt.val(id);
opt.text(city);
$('#cities').append(opt); //here we will append these new select options to a dropdown with the id 'cities'});
**$("#cities option:first").attr('selected','selected');**
}
});
});
});
// ]]>
</script>
你在告诉select将第一个选项设置为select。
希望这有帮助!!