解析JS实现无刷新联动菜单技巧(1)(3)

HTML:

<scriptlanguagescriptlanguage="JavaScript"
type="text/javascript">　  
varcityArr=[];  
cityArr['江苏省']=[  
{txt:'南京',val:'南京'},  
{txt:'无锡',val:'无锡'},  
{txt:'徐州',val:'徐州'},  
{txt:'苏州',val:'苏州'},  
{txt:'南通',val:'南通'},  
{txt:'淮阴',val:'淮阴'},  
{txt:'扬州',val:'扬州'},  
{txt:'镇江',val:'镇江'},  
{txt:'常州',val:'常州'}  
];  
cityArr['浙江省']=[  
{txt:'杭州',val:'杭州'},　  
{txt:'宁波',val:'宁波'},  
{txt:'温州',val:'温州'},  
{txt:'湖州',val:'湖州'}  
];　  
functionsetCity(province){  
setSelectOption('city',cityArr[province],'-请选择-');  
}　  
</script>　  
<selectnameselectname="province"id="province"
onchange="if(this.value!='')  
setCity(this.options[this.selectedIndex].value);">  
<optionvalueoptionvalue="">-请选择-</option>  
<optionvalueoptionvalue="江苏省">江苏省</option>  
<optionvalueoptionvalue="浙江省">浙江省</option> 
</select> 
省　  
<selectnameselectname="city"id="city">  
<optionvalueoptionvalue="">-请选择-</option> 
</select> 
市  
 

根据这个结构，设置好数据，我们可以很容易的实现无限级联动菜单。或者我们也可以将数据存放在文件或数据库中，通过Ajax获取数据。