HI ms_shilpa!!
onchange of counrty combobox ,add corresponding state into StateCombobox.
now it's upto you and your requirement,either you can use AJAX to load StateCombobox values or you can use hidden field for this.
e.g.
step1>Countrycombo ->country1,country2,country3 etc.
step2>put all the state values/names for all the countries in a singlehidden field
like
<input type=hidden name="countrystatevalue"
value="<option value='1'>Country1state1</option><option value='2'>Country1state2</option><option value='3'>Country1state3</option>+++<option value='1'>Country2state1</option><option value='2'>Country2state2</option><option value='3'>Country2state3</option>+++<option value='1'>Country3state1</option><option value='2'>Country3state2</option><option value='3'>Country3state3</option>">
step3>onchange of country you can get the value_state of that country .
e.g user is selecting country1, it has option value="1_2"
where 1 stand for country code,
2 stand which statevalue should be populated from hidden countrystatevalue field.
now split countrystatevalue value based on "+++" delimeter (you can choose ur own delimeter)
and
then document.getElementById("StateComboName").innerHTM L=countrystatevalue.split('+++')[i]
where i is the second value of 1_2 .i e 2
hope follwing code will help you
******************test.html**************
<script>
function setState()
{
totaloption=document.getElementById("state").lengt h;
for(i=totaloption-1;i>=0;i--)
{
document.getElementById("state").options[i]=null
}
if(document.getElementById("country").selectedInde x<1)
return
optionvalue=(document.getElementById("countrystate value").value).split("+++")[((document.getElementById("country").value).split( "_"))[1]-1]
tmpoptions=optionvalue.split("//")
for(i=0;i<tmpoptions.length;i++)
{
optionvaluestr=tmpoptions[i].split("--")[0]
optionTxt=optionvaluestr.split("--")[0]
optionValue=optionvaluestr.split("--")[1]
newoption= new Option(optionTxt,optionValue);
document.getElementById("state").options[document.getElementById("state").length]=newoption;
}
}
</script>
<html>
<select name="country" id="country" onchange="setState()">
<option value="">Select Country</option>
<option value="10_1">Country1</option>
<option value="11_2">Country2</option>
<option value="12_3">Country3</option>
<option value="13_4">Country4</option>
<option value="14_5">Country5</option>
</select> <br>
<select id="state" name="state">
</select>
<br>
<input type=hidden id=countrystatevalue
value="Country1state1--1//Country1state2--2//Country1state3--3//Country1state4--4+++Country2state1--1//Country2state2--2//Country2state3--3//Country2state4--4+++Country3state1--1//Country3state2--2//Country3state3--3//Country3state4--4+++Country4state1--1//Country4state2--2//Country4state3--3//Country4state4--4+++Country5state1--1//Country5tate2--2//Country5state3--3//Country5state4--4">
Cheers :)
vinod
|
