FREE JavaSCRIPT - event change form options, country selector, list dynamic option

About

This javascript will help you to dynamically populate one form option field while the other option field is changed. This script can be used as country, state, city selector script.

Features

a) Javascript for dynamic event option changes.
b) You can add any number of options.
c) Values of both option fields can be modified by user.
d) Works with both IE and Mozilla.
e) Just copy the code and modify it to your requirement.

Preview

Code

<!-- Script by hscripts.com -->
<!-- copyright hioxindia.com -->
<script type="text/javascript">
var aa = new Array("state1","state2","state3");
state1 = new Array("city1","city2");
state2 = new Array("city21","city22","city23");
state3 = new Array("city31","city32","city33");
function changeval()
{
 var val1 = document.sform.sel1.value;
 var optionArray = eval(val1);
 for(var df=0; df<optionArray.length; df++)
 {
  var ss = document.sform.sel2;
  ss.options.length = 0;
  for(var ff=0; ff<optionArray.length; ff++)
  {
   var val = optionArray[ff];
   ss.options[ff] = new Option(val,val);
  }
 }
}
</script>

<form name=sform>
<select name=sel1 onchange=changeval()>
<script type="text/javascript">
for(var dd=0; dd<aa.length; dd++)
{
 document.write("<option value=\""+aa[dd]+"\">"+aa[dd]+"</option>");
}
</script>
</select>
<select name=sel2>
</select>
</form>

Release Date - 15-02-2004
Get free version without ©copyright link for just 5

For customization of this script or any script development, contact us at support@hscripts.com

Usage

a) To change the first "option list" change the line
var aa = new Array("state1","state2","state3");
add any thing you want instead of state1, state2 ......
b) Your changes should reflect in the next lines too.
state1 = new Array("city1","city2");
state2 = new Array("city21","city22","city23");
state3 = new Array("city31","city32","city33");
Say if you change state1 to xxxx, do the same changes in the lines below where state1 is used.
Another example
var aa = new Array("option1","option2");
option1 = new Array("list1","list2");
option2 = new Array("list21","list22","list23");
c) Here we have used form name as "sform" and select field names as "sel1" and "sel2". Don't alter the names.

License

- The javascript (misspelled as java script) is given under GPL License
- i.e. Free use for those who use the codes as it is.
- Free, if your modification does not remove our copyright information and links.
- Click Here for detailed license information.
- You can purchase the script if your requirements does not meet our GPL License terms.

Dynamic Form Select Option