<!DOCTYPE html>
<html>
<head>
<title>json with JQuery</title>
</head>
<body>
<select id="first">
<option value="all">All</option>
</select>
<select id="second">
<option value="all">All</option>
</select>
<select id="third">
<option value="all">All</option>
</select>
<select id="fourth">
<option value="all">All</option>
</select>
<select id="five">
<option value="all">All</option>
</select>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
var Countries = ["India","USA"];
var States = {
"India": ["Andhra Pradesh","Andaman and Nicobar Islands","Arunachal Pradesh","Assam","Bihar","Chandigarh","Chhattisgarh","Dadra and Nagar Haveli","Daman and Diu","Delhi","Goa","Gujarat","Haryana","Himachal Pradesh","Jammu and Kashmir","Jharkhand","Karnataka","Kerala","Lakshadweep","Madhya Pradesh","Maharashtra","Manipur","Meghalaya","Mizoram","Nagaland","Orissa","Pondicherry","Punjab","Rajasthan","Sikkim","Tamil Nadu","Tripura","Uttar Pradesh","Uttaranchal","West Bengal"],
"USA": ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","District of Columbia","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]
};
var Districts = {
"Alabama": ["Nicobar","North and Middle Andaman","South Andaman"],
"Andhra Pradesh": ["East Godavari","West Godavari","Krishna","Guntur","Prakasam","Sri Potti Sri Ramulu Nellore","Srikakulam","Vizianagaram","and Visakhapatnam","Kurnool","Chittoor","YSR Kadapa and Anantapur"]
};
var Mandals = {
"Nicobar": ["Arong","Big Lapati","Chuckchucha","IAF Camp","Kakana","Kimois","Kinmai","Kinyuka","Malacca","Mus","Perka","Sawai","Small Lapati","Tamaloo","Tapoiming","Teetop"],
"East Godavari": ["Rajahmundry Urban","Kakinada Urban","Kakinada Rural","Rajahmundry Rural","Amalapuram","Tuni","Samalkota","Mandapeta","Pithapuram","Peddapuram","Ramachandrapuram","Rajanagaram","Kadiam","Thondangi","Ravulapalem","Thallarevu","Kothapalle","Jaggampeta","Korukonda","Prathipadu","Gollaprolu","Yeleswaram","Kothapeta","Karapa","Malikipuram","P.Gannavaram","Katrenikona","Kirlampudi","Alamuru","Sakhinetipalle","Seethanagaram","Pedapudi","Razole","Kajuluru","Anaparthy","Mamidikuduru","Biccavolu","Gokavaram","Mummidivaram","Allavaram"],
"Krishna": ["Machilipatnam","Penamaluru","Gudivada","Vijayawada Rural","Nuzvid","Jaggayyapeta","Ibrahimpatnam","Nandigama","Gannavaram","Bapulapadu","Kaikalur","Tiruvuru","Vuyyuru","Gampalagudem","Kanchikacherla","Kalidindi","Kankipadu","Mylavaram","Pedana","Mudinepalle","Agiripalle","Vatsavai","Chandarlapadu","Vissannapet","G.Konduru","Musunuru","Pamarru","Unguturu","Pamidimukkala","Challapalle","Chatrai","Movva","Penuganchiprolu","Gudlavalleru","Guduru","Veerullapadu","Kruthivennu","Mandavalli","A.Konduru","Nagayalanka","Bantumilli","Reddigudem","Koduru","Avanigadda","Ghantasala","Thotlavalluru","Nandivada","Mopidevi","Pedaparupudi"],
"Guntur": ["Tenali","Narasaraopet","Mangalagiri","Chilakaluripet H.O. Purushotha Patnam","Bapatla","Sattenapalle","Ponnur","Piduguralla","Macherla","Vinukonda","Repalle","Tadepalle","Dachepalle","Pedakakani","Chebrolu","Nadendla","Tadikonda","Amaravathi","Gurazala","Phirangipuram","Nekarikallu","Duggirala","Rompicherla","Cherukupalle H.O. Arumbaka","Medikonduru","Nizampatnam","Atchampet","Bollapalle","Kollipara","Edlapadu","Krosuru","Kollur","Thullur","Nuzendla","Machavaram","Karempudi","Karlapalem","Nagaram","Bhattiprolu","Pedakurapadu","Rentachintala","Prathipadu","Durgi","Veldurthi","Ipur","Tsundur","Vatticherukuru","Rajupalem","Amruthalur","Vemuru","Muppalla","Pedanandipadu","Kakumanu","Pittalavanipalem","Bellamkonda","Savalyapuram H.O. Kanamarlapudi"]
};
var Villages = {
"Arong": ["Arong","Big Lapati","Chuckchucha","IAF Camp","Kakana","Kimois","Kinmai","Kinyuka","Malacca","Mus","Perka","Sawai","Small Lapati","Tamaloo","Tapoiming","Teetop"],
"Rajahmundry Urban" : ["Rajahmundry Urban","Rajavolu","Torredu"],
"Machilipatnam" : ["Arisepalle","Bhogireddipalle","Borrapothupalem","Buddalapalem","Chilakalapudi"],
"Tenali" : ["Kolakaluru","Nandivelugu","Nelapadu","Pedaravuru"]
};
$.each(Countries, function(key, value) {
$('#first').append($("<option></option>").attr("value",value).text(value));
});
function changeSelectOption(firstId, secondId, jsonObj){
$(firstId).change(function() {
$(secondId).find('option').remove().end().append('<option value="All">All</option>').val('All');
$.each(jsonObj[$(this).val()], function(key, value) {
$(secondId)
.append($("<option></option>")
.attr("value",value)
.text(value));
});
});
}
changeSelectOption("#first", "#second", States);
changeSelectOption("#second", "#third", Districts);
changeSelectOption("#third", "#fourth", Mandals);
changeSelectOption("#fourth", "#five", Villages);
</script>
</body>
</html>
<html>
<head>
<title>json with JQuery</title>
</head>
<body>
<select id="first">
<option value="all">All</option>
</select>
<select id="second">
<option value="all">All</option>
</select>
<select id="third">
<option value="all">All</option>
</select>
<select id="fourth">
<option value="all">All</option>
</select>
<select id="five">
<option value="all">All</option>
</select>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
var Countries = ["India","USA"];
var States = {
"India": ["Andhra Pradesh","Andaman and Nicobar Islands","Arunachal Pradesh","Assam","Bihar","Chandigarh","Chhattisgarh","Dadra and Nagar Haveli","Daman and Diu","Delhi","Goa","Gujarat","Haryana","Himachal Pradesh","Jammu and Kashmir","Jharkhand","Karnataka","Kerala","Lakshadweep","Madhya Pradesh","Maharashtra","Manipur","Meghalaya","Mizoram","Nagaland","Orissa","Pondicherry","Punjab","Rajasthan","Sikkim","Tamil Nadu","Tripura","Uttar Pradesh","Uttaranchal","West Bengal"],
"USA": ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","District of Columbia","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]
};
var Districts = {
"Alabama": ["Nicobar","North and Middle Andaman","South Andaman"],
"Andhra Pradesh": ["East Godavari","West Godavari","Krishna","Guntur","Prakasam","Sri Potti Sri Ramulu Nellore","Srikakulam","Vizianagaram","and Visakhapatnam","Kurnool","Chittoor","YSR Kadapa and Anantapur"]
};
var Mandals = {
"Nicobar": ["Arong","Big Lapati","Chuckchucha","IAF Camp","Kakana","Kimois","Kinmai","Kinyuka","Malacca","Mus","Perka","Sawai","Small Lapati","Tamaloo","Tapoiming","Teetop"],
"East Godavari": ["Rajahmundry Urban","Kakinada Urban","Kakinada Rural","Rajahmundry Rural","Amalapuram","Tuni","Samalkota","Mandapeta","Pithapuram","Peddapuram","Ramachandrapuram","Rajanagaram","Kadiam","Thondangi","Ravulapalem","Thallarevu","Kothapalle","Jaggampeta","Korukonda","Prathipadu","Gollaprolu","Yeleswaram","Kothapeta","Karapa","Malikipuram","P.Gannavaram","Katrenikona","Kirlampudi","Alamuru","Sakhinetipalle","Seethanagaram","Pedapudi","Razole","Kajuluru","Anaparthy","Mamidikuduru","Biccavolu","Gokavaram","Mummidivaram","Allavaram"],
"Krishna": ["Machilipatnam","Penamaluru","Gudivada","Vijayawada Rural","Nuzvid","Jaggayyapeta","Ibrahimpatnam","Nandigama","Gannavaram","Bapulapadu","Kaikalur","Tiruvuru","Vuyyuru","Gampalagudem","Kanchikacherla","Kalidindi","Kankipadu","Mylavaram","Pedana","Mudinepalle","Agiripalle","Vatsavai","Chandarlapadu","Vissannapet","G.Konduru","Musunuru","Pamarru","Unguturu","Pamidimukkala","Challapalle","Chatrai","Movva","Penuganchiprolu","Gudlavalleru","Guduru","Veerullapadu","Kruthivennu","Mandavalli","A.Konduru","Nagayalanka","Bantumilli","Reddigudem","Koduru","Avanigadda","Ghantasala","Thotlavalluru","Nandivada","Mopidevi","Pedaparupudi"],
"Guntur": ["Tenali","Narasaraopet","Mangalagiri","Chilakaluripet H.O. Purushotha Patnam","Bapatla","Sattenapalle","Ponnur","Piduguralla","Macherla","Vinukonda","Repalle","Tadepalle","Dachepalle","Pedakakani","Chebrolu","Nadendla","Tadikonda","Amaravathi","Gurazala","Phirangipuram","Nekarikallu","Duggirala","Rompicherla","Cherukupalle H.O. Arumbaka","Medikonduru","Nizampatnam","Atchampet","Bollapalle","Kollipara","Edlapadu","Krosuru","Kollur","Thullur","Nuzendla","Machavaram","Karempudi","Karlapalem","Nagaram","Bhattiprolu","Pedakurapadu","Rentachintala","Prathipadu","Durgi","Veldurthi","Ipur","Tsundur","Vatticherukuru","Rajupalem","Amruthalur","Vemuru","Muppalla","Pedanandipadu","Kakumanu","Pittalavanipalem","Bellamkonda","Savalyapuram H.O. Kanamarlapudi"]
};
var Villages = {
"Arong": ["Arong","Big Lapati","Chuckchucha","IAF Camp","Kakana","Kimois","Kinmai","Kinyuka","Malacca","Mus","Perka","Sawai","Small Lapati","Tamaloo","Tapoiming","Teetop"],
"Rajahmundry Urban" : ["Rajahmundry Urban","Rajavolu","Torredu"],
"Machilipatnam" : ["Arisepalle","Bhogireddipalle","Borrapothupalem","Buddalapalem","Chilakalapudi"],
"Tenali" : ["Kolakaluru","Nandivelugu","Nelapadu","Pedaravuru"]
};
$.each(Countries, function(key, value) {
$('#first').append($("<option></option>").attr("value",value).text(value));
});
function changeSelectOption(firstId, secondId, jsonObj){
$(firstId).change(function() {
$(secondId).find('option').remove().end().append('<option value="All">All</option>').val('All');
$.each(jsonObj[$(this).val()], function(key, value) {
$(secondId)
.append($("<option></option>")
.attr("value",value)
.text(value));
});
});
}
changeSelectOption("#first", "#second", States);
changeSelectOption("#second", "#third", Districts);
changeSelectOption("#third", "#fourth", Mandals);
changeSelectOption("#fourth", "#five", Villages);
</script>
</body>
</html>
No comments:
Post a Comment