I built country and city drop down menus with AJAX in PHP. They work fine. But the problem is that I want if select any country and after this select the option "please select" the city option return also to "please select"
How to modify ajax code to do this ?
<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>
// the dropdown select menu
<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>
Simply don't proceed with ajax and clearing city options if selected option is please select.
$('#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();
});
I am going to guess that in the list of cities you're retrieving with Ajax you have as first city the "Please Select" option. Otherwise, you should add it with Id value 0. That way you can filter easily if the User triggers submit without selecting a City.
Then, answering your question.
<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>
You are telling the select to set the first option as select.
Hope this helps!!