I have 4 select boxes named state, district, tehsil, village. By default on form load the state is popluated with all the states in database. After selecting a state, the form is refreshed and the district select box is populated with districts of the selected state. Similiarly for tehsils and blocks. This is time and database query consuming. I need to retrieve all the districts, tehsils, etc in one nX4 matrix and use javascript to appropriately populate the respective select boxes on change of the other. Can anybody send me javascript code for that, may be for just 2 levels, state and district? I can insert the jsp code in that.
<head>
<script>
States = {
State1 : ['District1', 'District2', 'District3'],
State2 : ['District4', 'District5', 'District6']
}
/*
This creates an object called States with the arrays States.State1 and States.State2 containing the respective districts. If you have to use a space in the state name, use an _ instead and we'll replace it when it's written to the page. (Do similar things to other special characters)
*/
function ShowDistricts(){
var List = document.getElementById('district')
while(List.options[0]){
List.removeChild(List.options[0])
}
var Sel=document.getElementById('state')
var selected_state=Sel.options[Sel.selectedIndex].value
for(var i in States[selected_state]){
var new_option = document.createElement('Option')
new_option.value=States[selected_state][i]
new_option.innerHTML=States[selected_state][i].replace("_"," ")
List.appendChild(new_option)
}
}
/*
This function should generate a new list of districts depending on which state is selected, it also clears the list before populating it with new names.
*/
</script>
</head>
<body>
<form>
<select id="state" onchange="ShowDistricts()">
</select>
<p>
<select id="district">
</select>
</form>
</body>
I haven't tested this code, but I hope you get the idea.
You can do it in other ways too by for example making each state and district representing an index in a matrix, but I decided to use an object since I already had code for that from another app.
I tested it and it worked. Charming piece of code, I must say. Good job, TwoD!
The only thing I've noticed about it worth making a remark on is that the JavaScript replace function only replaces one occurance of the character, so there you might be better of with regEx or a loop with replacements.
Linear Mode
