I'm Using Dependent select box(country & states)And it works well for me But when the data is not returned, the option is removed
<option>--States---</option>
I do not want to be removed I want when the data is not returned show the message to be displayed on
< option>--States---</ option>
(show default < option>)
how can I do that?
script:
<script>
$(document).ready(function() {
$('select[name="country"]').on('change', function(){
var countryId = $(this).val();
if(countryId) {
$.ajax({
url: "{{route('home.state','')}}/" + countryId,
type:"GET",
dataType:"json",
beforeSend: function(){
$('#loader').css("visibility", "visible");
},
success:function(data) {
$('select[name="state"]').empty();
$.each(data, function(key, value){
$('select[name="state"]').append('<option value="'+ key +'">' +
value + '</option>');
});
},
complete: function(){
$('#loader').css("visibility", "hidden");
}
});
} else {
$('select[name="state"]').empty();
}
});
});
</script>