解析JS实现无刷新联动菜单技巧

本文向大家简单介绍一下什么是联动菜单，以及JS实现无刷新联动菜单（select）的方法，其实，联动菜单的实现原理非常简单，本文详细介绍了联动菜单的实现方式，知道了原理，我们可以很容易地制作从XML、数据库加载的无限级联动菜单。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名注册、网页空间、营销软件、网站建设、嘉善网站维护、网站推广。

JS实现无刷新联动菜单（select）的方法

所谓联动菜单，就是后一个下拉框的选项是根据前一个下拉框被选中的值来决定的，一个典型的应用就是省市联动菜单了，市的下拉选项是根据你选了哪个省来决定的，类似的需求我们经常遇到，相信许多新手都被这个问题困扰过。

其实，联动菜单的实现原理非常简单，本文详细介绍了联动菜单的实现方式，知道了原理，我们可以很容易地制作从XML、数据库加载的无限级联动菜单。

联动菜单的实现方法：

1.确定数据格式：

首先，我们介绍一下创建Option的语法：

Code:

 
 
 
      
  
  
  1. 　　varnewOption=newOption(optionText,optionvalue);  
    2.   
  
  
  2.  
    3.

根据上面的语法，我们知道select选项分optionText和optionvalue两个内容，optionText即下拉框中我们看到的选项，而optionvalue则是提交的实际值。比如一个选项我们看到的是“北京”，而实际提交的值是“010”。

为了保持一致，我们确定选项的格式为：

Code:

 
 
 
      
  
  
  1. 　　{txt:"选项名",val:"选项值"}  
    2.   
  
  
  2.  
    3.

那么一个选项组则是：

Code:

 
 
 
      
  
  
  1. varchildArr=[];  
    2.   
  
  
  2. childArr['父选项值1']=[  
    3.   
  
  
  3. 　　{txt:"选项名1",val:"选项值1"},  
    4.   
  
  
  4. 　　{txt:"选项名2",val:"选项值2"},  
    5.   
  
  
  5. 　　{txt:"选项名3",val:"选项值3"},  
    6.   
  
  
  6. 　　...  
    7.   
  
  
  7. 　　{txt:"选项名n",val:"选项值n"}  
    8.   
  
  
  8. ]  
    9.   
  
  
  9. childArr['父选项值2']=[  
    10.   
  
  
  10. 　　{txt:"选项名1",val:"选项值1"},  
    11.   
  
  
  11. 　　{txt:"选项名2",val:"选项值2"},  
    12.   
  
  
  12. 　　{txt:"选项名3",val:"选项值3"},  
    13.   
  
  
  13. 　　...  
    14.   
  
  
  14. 　　{txt:"选项名n",val:"选项值n"}  
    15.   
  
  
  15. ]  
    16.   
  
  
  16.  
    17.

 其中“父选项值”是父下拉列表选中的值。

注意：[]和{}中的值是以“,”(逗号)分隔的，但是***一个值后面不能有“,”(逗号)，否则语法错误，PHP程序员要特别注意！！！#p#

2.根据传入的数组创建选项列表：

Code:

 
 
 
      
  
  
  1. for(vari=0;i  
  
  
  2. {  
    3.   
  
  
  3. 　　selectObj.options[i]=newOption(optionList[i].txt,optionList[i].val);  
    4.   
  
  
  4. }  
    5.   
  
  
  5.  
    6.

 3.在设置选项之前，我们需要先将原有选项清空：

Code:

 
 
 
      
  
  
  1. functionremoveOptions(selectObj)  
    2.   
  
  
  2. {  
    3.   
  
  
  3. 　　if(typeofselectObj!='object')  
    4.   
  
  
  4. 　　{  
    5.   
  
  
  5. 　　　　selectObj=document.getElementById(selectObj);  
    6.   
  
  
  6. 　　}  
    7.   
  
  
  7. 　　//原有选项计数  
    8.   
  
  
  8. 　　varlen=selectObj.options.length;  
    9.   
  
  
  9. 　　for(vari=0;i  
  
  
  10. 　　{  
    11.   
  
  
  11. 　　　　//移除当前选项  
    12.   
  
  
  12. 　　　　selectObj.options[0]=null;  
    13.   
  
  
  13. 　　}  
    14.   
  
  
  14. }  
    15.   
  
  
  15.  
    16.

 　　注意，这里不是用selectObj.options[i]而是用的selectObj.options[0]，由于在options[0]删除后，后面的选项就会补上，因此，我们只需要selectObj.options[0]=null。

4.设置一个提示选择项和默认选择项：

通常我们在下拉列表中会设置一个提示选择项，如：“请选择城市”，这个选项值为空，作用只是提示用户执行选择操作。

另外，下拉列表也需要能够设置默认选择项，即在页面加载的时候，设置选中状态的项目。

完整代码如下：

Javascript:

 
 
 
      
  
  
  1.   
  
  
  2. type="text/javascript"> 
    3.   
  
  
  3.  
    4.   
  
  
  4.  
    5.   
  
  
  5.  
    6.

 #p#示例代码：

HTML:

 
 
 
      
  
  
  1.   
  
  
  2. type="text/javascript">　  
    3.   
  
  
  3. varcityArr=[];  
    4.   
  
  
  4. cityArr['江苏省']=[  
    5.   
  
  
  5. {txt:'南京',val:'南京'},  
    6.   
  
  
  6. {txt:'无锡',val:'无锡'},　　　　  
    7.   
  
  
  7. {txt:'徐州',val:'徐州'},　　　　  
    8.   
  
  
  8. {txt:'苏州',val:'苏州'},　　　　  
    9.   
  
  
  9. {txt:'南通',val:'南通'},　　　　  
    10.   
  
  
  10. {txt:'淮阴',val:'淮阴'},　　　　  
    11.   
  
  
  11. {txt:'扬州',val:'扬州'},　　　　  
    12.   
  
  
  12. {txt:'镇江',val:'镇江'},　　　　  
    13.   
  
  
  13. {txt:'常州',val:'常州'}　　  
    14.   
  
  
  14. ];  
    15.   
  
  
  15. cityArr['浙江省']=[　　　　  
    16.   
  
  
  16. {txt:'杭州',val:'杭州'},　　　　　  
    17.   
  
  
  17. {txt:'宁波',val:'宁波'},　　　　  
    18.   
  
  
  18. {txt:'温州',val:'温州'},　　　　  
    19.   
  
  
  19. {txt:'湖州',val:'湖州'}　　  
    20.   
  
  
  20. ];　  
    21.   
  
  
  21. functionsetCity(province){　　　　  
    22.   
  
  
  22. setSelectOption('city',cityArr[province],'-请选择-');  
    23.   
  
  
  23. }　  
    24.   
  
  
  24. 　  
    25.   
  
  
  25.   
  
  
  26. onchange="if(this.value!='')  
    27.   
  
  
  27. setCity(this.options[this.selectedIndex].value);">　　  
    28.   
  
  
  28. -请选择-　　  
    29.   
  
  
  29. 江苏省　　  
    30.   
  
  
  30. 浙江省 
    31.   
  
  
  31.  
    32.   
  
  
  32. 省　  
    33.   
  
  
  33. 　　  
    34.   
  
  
  34. -请选择- 
    35.   
  
  
  35.  
    36.   
  
  
  36. 市  
    37.   
  
  
  37.  
    38.

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

【编辑推荐】

  1. JavaScript对象的定义及创建实例
  2. 常用JavaScript内部对象
  3. JavaScript中图像处理技巧
  4. JavaScript函数中arguments对象
  5. Javascript中CSS属性float特殊写法

当前题目：解析JS实现无刷新联动菜单技巧
当前网址：http://www.shufengxianlan.com/qtweb/news44/177144.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

软件开发知识

同城分类信息

成都画册设计公司　　 　成都ssl证书申请　　 　小程序开发　　 　小谭建站　　 　成都主机托管　　 　卖友情链接　　 　商城网站　　 　成都响应式网站建设　　 　复盛机电设备　　 　成都定制网站　　 　二枢服务器托管　　 　成都画册设计　　 　成都企业网站建设　　 　尊格展览　　 　成都铺面装修　　 　简阳网站建设　　 　江油网站建设　　 　中国电信成都枢纽中心　　 　富顺网站建设　　 　彭山网站制作