JavaScript No Refresh Select Linkage Menu

The realization method of linkage menu:
1. Determine the data format:
First, let's introduce the syntax for creating Option:

var newoption = new Option (Optiontext, optionvalue);
Based on the syntax above, we know that the Select option Optiontext and optionvalue two content, optiontext the option we see in the Drop-down box, and optionvalue is the actual value of the submission. For example, one option we see is "Beijing", and the actual value is "010".

To maintain consistency, we determine that the format of the option is:

The code is as follows

Copy Code

{txt: "option name", Val: "Option Value"} Then an option group is: var childarr = []; childarr[' parent option value 1 '] = [ {txt: "option name 1", Val: "Option value 1"}, {txt: "option Name 2", Val: "Option value 2"}, {txt: "option name 3", Val: "Option value 3"}, ... {txt: "option name N", Val: "Option value N"} ] childarr[' parent option value 2 '] = [ {txt: "option name 1", Val: "Option value 1"}, {txt: "option Name 2", Val: "Option value 2"}, {txt: "option name 3", Val: "Option value 3"}, ... {txt: "option name N", Val: "Option value N"} ]

where "parent option value" is the value selected by the parent Drop-down list.

Note: The values in [] and {} are separated by "," (comma), but there is no "," (comma) after the last value, otherwise the syntax is wrong, the PHP programmer should pay special attention to!!!

2. Create a list of options based on the incoming array:

The code is as follows

Copy Code

for (Var i=0 i < Len; i++) { Selectobj.options[i] = new Option (Optionlist[i].txt, optionlist[i].val); } 3. Before setting the options, we need to empty the original option: function Removeoptions (selectobj) { if (typeof selectobj!= ' object ') { Selectobj = document.getElementById (selectobj); } Original option Count var len = selectObj.options.length; for (Var i=0 i < Len; i++) { Remove Current option SELECTOBJ.OPTIONS[0] = null; } }

Note that this is not used in selectobj.options[i] but is used selectobj.options[0], because after the deletion of Options[0], the following options will be filled, so we only need selectobj.options[0] = Null.

4. Set a prompt to select items and the default selection:
Usually we will set a prompt to select items in the Drop-down list, such as "Please select City", this option value is null, the function simply prompts the user to perform the selection action.

Also, the Drop-down list needs to be able to set the default selection, that is, when the page loads, set the selected state of the item

Instance

The code is as follows

Copy Code

<script language= "JavaScript" type= "Text/javascript" >var cityarr=[];cityarr[' Jiangsu Province ']=[{txt: ' Nanjing ', Val: ' Nanjing '},{ txt: ' Wuxi ', Val: ' Wuxi '},{txt: ' Xuzhou ', Val: ' Xuzhou '},{txt: ' Suzhou ', Val: ' Suzhou '},{txt: ' Nantong ', Val: ' Nantong '},{txt: ' Huaiyin ', Val: ' Huaiyin '},{txt: ' Yangzhou ', Val: ' Yangzhou '},{txt: ' Zhenjiang ', Val: ' Zhenjiang '},{txt: ' Changzhou ', Val: ' Changzhou '}];cityarr[' Zhejiang province ']=[{txt: ' Hangzhou ', Val: ' Hangzhou '},{txt: ' Ningbo ', Val: ' Ningbo '},{ txt: ' Wenzhou ', Val: ' Wenzhou '},{txt: ' Huzhou ', Val: ' Huzhou '}];function setcity (province) {setselectoption (' city ', cityarr[province], '-Please select-');} function Removeoptions (selectobj) {if (typeof selectobj!= ' object ') {Selectobj=document.getelementbyid (selectobj);} var len=selectobj.options.length;for (var i=0;i<len;i++) {selectobj.options[0]=null;}} function Setselectoption (selectobj,optionlist,firstoption,selected) {if (typeof selectobj!= ' object ') {Selectobj=document.getelementbyid (selectobj);} Removeoptions (selectobj); var start=0;if (firstoption) {selectobj.options[0]=new Option (firstoption, '); start++} var len=optionlist.length;for (var i=0;i<len;i++) {selectobj.options[start]=new Option (optionlist[i].txt,optionlist[i].val); if (Selected==optionlist[i].val) {selectobj.options[start].selected=true;} start++}} </script> <select Name= "province" id= "province" onchange= "if (this.value!= ') setcity (this.options[this.selectedindex].value);" ><option Value= "" >-Please select-</option><option Value= "Jiangsu Province" > </option><option, Jiangsu Province Value= "Zhejiang province" > Zhejiang Province </option> </select> province <select Name= "City" id= "City" ><option Value= "" >-Please choose-</option> </select> City