As it contains laravel blade syntax, you should add laravel tag as well, helps in better search results.
So, moving to question, I have taken a json response as test case.
In your controller, you can pass the json object to jquery.(or use ajax to get json response.)
For example I have used this data sample.
$arr = ['usa' => ['usa state1' => ["usa state1 city1", "usa state1 city2", "usa state1 city3"],
'usa state2' => ["usa state2 city1", "usa state2 city2", "usa state2 city3"],
'usa state3' => ["usa state3 city1", "usa state3 city2", "usa state3 city3"]
],
'canada' => ['canada state1' => ["canada state1 city1", "canada state1 city2", "canada state1 city3"],
'canada state2' => ["canada state2 city1", "canada state2 city2", "canada state2 city3"],
'canada state3' => ["canada state3 city1", "canada state3 city2", "canada state3 city3"]
],
'mexico' => ['mexico state1' => ["mexico state1 city1", "mexico state1 city2", "mexico state1 city3"],
'mexico state2' => ["mexico state2 city1", "mexico state2 city2", "mexico state2 city3"],
'mexico state3' => ["mexico state3 city1", "mexico state3 city2", "mexico state3 city3"]
]
];
echo json_encode($arr);
It gives the json response as
{"usa":{"usa state1":["usa state1 city1","usa state1 city2","usa state1 city3"],"usa state2":["usa state2 city1","usa state2 city2","usa state2 city3"],"usa state3":["usa state3 city1","usa state3 city2","usa state3 city3"]},"canada":{"canada state1":["canada state1 city1","canada state1 city2","canada state1 city3"],"canada state2":["canada state2 city1","canada state2 city2","canada state2 city3"],"canada state3":["canada state3 city1","canada state3 city2","canada state3 city3"]},"mexico":{"mexico state1":["mexico state1 city1","mexico state1 city2","mexico state1 city3"],"mexico state2":["mexico state2 city1","mexico state2 city2","mexico state2 city3"],"mexico state3":["mexico state3 city1","mexico state3 city2","mexico state3 city3"]}}
So passing it to jquery
HTML
<select id="country"><option>Select a country</option></select>
<select id="states"><option>Select a state</option></select>
<select id="city"><option>Select a city</option></select>
Jquery
data = JSON.parse('{"usa":{"usa_state1":["usa state1 city1","usa state1 city2","usa state1 city3"],"usa_state2":["usa state2 city1","usa state2 city2","usa state2 city3"],"usa_state3":["usa state3 city1","usa state3 city2","usa state3 city3"]},"canada":{"canada_state1":["canada state1 city1","canada state1 city2","canada state1 city3"],"canada_state2":["canada state2 city1","canada state2 city2","canada state2 city3"],"canada_state3":["canada state3 city1","canada state3 city2","canada state3 city3"]},"mexico":{"mexico_state1":["mexico state1 city1","mexico state1 city2","mexico state1 city3"],"mexico_state2":["mexico state2 city1","mexico state2 city2","mexico state2 city3"],"mexico_state3":["mexico state3 city1","mexico state3 city2","mexico state3 city3"]}}')
$.each(data, function (index, item) {
;
$('#country').append('<option value=' + index + '>' + index + '</option>');
});
var selectedcountry = "";
$(document).ready(function () {
$("#country").change(function () {
if($('#country').val() != 'Select a country'){
$('#states').empty();
if($('#states').val() != 'Select a state') $('#states').append('<option>Select a state</option>');
$('#city').empty();
if($('#city').val() != 'Select a city') $('#city').append('<option>Select a city</option>');
var country = $("#country option:selected").val();
;
$.each(data[country], function (index, item) {
;
$('#states').append('<option value=' + index + '>' + index + '</option>');});
selectedcountry = country;
}else{
$('#states').empty().append('<option>Select a state</option>');
$('#city').empty().append('<option>Select a city</option>');
}
});
$("#states").change(function () {
$('#city').empty();
if($('#states').val() != 'Select a state'){
var states = $("#states option:selected").val();
$.each(data[selectedcountry][states], function (index, item) {
$('#city').append('<option value=' + item + '>' + item + '</option>');
});
}else{
$('#city').append('<option>Select a city</option>');
}
});
});
You can find demo(jsfiddle)
Post a Comment for "How To Select Option When After Select An Option?"