Tuesday, October 25, 2016

Multiple Select Fields Using Json and Jquery

<!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>

1 comment:

  1. LIC Merchant is the one stop Destination for Partners and Life Insurance Agents of Life Insurance Corporation of India.
    LIC Merchnat

    ReplyDelete