У меня есть 3 связанных выбора:
<label>Country:
<select style="width: 200px" class="country" class="form-control input-sm" name="country" id="country">
-
@foreach($countries as $contry)
<option value="{{$contry->id_country}}">{{$contry->name}}</option>
@endforeach
</select>
</label>
<label>Region:
<select style="width: 200px" class="region" name="region" class="form-control input-sm" id="region">
<option value=""></option>
</select>
</label>
<label>City:
<select id="city" class="city" style="width: 200px" name="city" >
<option value=""></option>
</select>
</label>
<script >
$('#country').on('change',function (e) {
var country_id=e.target.value;
console.log(country_id);
//ajax
// $('#city').empty();
$.get('/findRegions?country_id='+country_id,function (data) {
$('#region').empty();
$('#city').empty();
$.each(data,function (index,subcatObj){
$('#region').append('<option value="'+subcatObj.id+'">'+subcatObj.name+'</option>');
})
})
var region_id=e.target.value;
console.log(region_id);
//ajax
$.get('/findCitys?region_id='+region_id,function (data) {
$('#city').empty();
$.each(data,function (index,subcatObj){
$('#city').append('<option value="'+subcatObj.id+'">'+subcatObj.name+'</option>');
})
})
})
$('#region').on('change',function (e) {
var region_id=e.target.value;
console.log(region_id);
//ajax
$.get('/findCitys?region_id='+region_id,function (data) {
$('#city').empty();
$.each(data,function (index,subcatObj){
$('#city').append('<option value="'+subcatObj.id+'">'+subcatObj.name+'</option>');
})
})
})
</script>
Что происходит: чтобы выбрать регион, нужно изменить страну, даже если она уже правильная. Как предварительно загрузить необходимые данные в Select?
Например: Fefault Страна-> Россия-> Регион по умолчанию-> Карелия-> Город по умолчанию: Петрозаводск.