联动下拉菜单简单教程

提醒：本压缩包所有文件保存格式均为UTF - 8，引用时请注意格式以免乱码，必要时可重新保存为您需要的格式。正式使用建议使用build目录下压缩过的文件。别被右边滚动条吓倒，其实么简单的4个小例子，您就能使用本程序了。

本程序在(os win2003)ie6 ie7 opera9 firefox3 chrome0.2 safari3.1下测试通过，有bug暂时mailto：perry(at)yeeh.org，标题请标注"联动下拉菜单"，谢谢您的反馈。

第一个例子：上数据，绑定！

当然是添加1个select，姑且名字叫a1，空option就可以了。
<select name="a1"></select>
引入类文件。
<script type="text/javascript" src="selects.js"></script>
引入数据。注意数据格式，每个option都支持三种格式，["010","北京"]，前面的为option的value，后面的为text。{value:"021",text:"上海"}，一目了然的是option的value和text值。"江苏省"，既是value又是text。注意数组的逗号分隔，最后一个后面没逗号：）
var db = [ { data : [ ["","请选择省/直辖市"], ["010","北京"], {value:"021",text:"上海"}, "江苏省" ] } ];
获取对象
var a1 = document.getElementsByName('a1')[0];
绑定数据
s.bind(a1,db)
看看结果吧。数据完整上去了。
本例完整html代码：
<select name="a1"></select> <script type="text/javascript" src="selects.js"></script> <script type="text/javascript"> var s = selects; var db = [ { data : [ ["","请选择省/直辖市"], ["010","北京"], {value:"021",text:"上海"}, "江苏省" ] } ]; var a1 = document.getElementsByName('a1')[0]; s.bind(a1,db) </script>

第二个例子：二级联动演示（人才数据）

不是说联动么，联呢？别急，就来了。
这次我们给2个select，一个叫jobsort，一个叫jobname。
<select name="jobsort"></select><select name="jobname"></select>
一样，引入类文件，引入数据，因为文件大，我们就直接引入现成的js吧。
<script type="text/javascript" src="selects.js"></script>
注意，数据有不同哦。我们发现数据是类似这样的
var city = [ { disabled : true, data : [ ["","请选择市"] ] }, { value : "021", data : [ ["02100","上海市"] ] }, { index : 1, data : [ ["01000","北京市"] ] }, { text : "江苏省", data : [ ["","请选择市"], ["02501","苏州"], {value:"02502",text:"泰州"}, "南京" ] } ];
第一个请选择市，我们之前见过。后面的怎么多了index，value，text？原来这是根据上级选项的值来确定匹配的值，匹配的当然是后面data里面的数据啦。如果是index，value，text都没有，那么就作为默认选项出现。那么disabled呢？这个是判定如果上级没选择，本级是不是灰色(不可选)，此数值为可选项，如果需要post/get传值到其他页面，这个千万记得的别有，或者有也设置为false。注意，firefox下disabled选项无效，因为firefox下对于刚刚un disabled的元素无法触发事件，详情请看这里。
取得对象，绑定数据。
var s = selects; //获取对象 var js = document.getElementsByName('jobsort')[0];//职位类别 var jn = document.getElementsByName('jobname')[0];//职位名称 //绑定数据 s.bind(js,jobsort); s.bind(jn,jobname);
可是这还没动啊，嘿嘿，加一句话就行了。前面的是父，后面的是子。
s.parent(js,jn);
给个默认值。
s.selected(js,{value:''});
look：
来，选好了看看值。
本例完整html代码：
<select name="jobsort"></select><select name="jobname"></select> <script type="text/javascript" src="selects.js"></script> <script type="text/javascript" src="data_job.js"></script> <script type="text/javascript"> var s = selects; //获取对象 var js = document.getElementsByName('jobsort')[0];//职位类别 var jn = document.getElementsByName('jobname')[0];//职位名称 //绑定数据 s.bind(js,jobsort); s.bind(jn,jobname); //确定重属关系 s.parent(js,jn); //给个默认值 s.selected(js,{value:''}); </script>

第三个例子：三级联动演示（省市区数据）

这次我们要3级联动啦！
3个对象，3个数据捆绑，2个从属关系。
<select name="pro"></select><select name="city"></select><select name="area"></select> <script type="text/javascript" src="selects.js"></script> <script type="text/javascript" src="data_china.js"></script> <script type="text/javascript"> var s = selects; //获取对象 var p = document.getElementsByName('pro')[0];//省 var c = document.getElementsByName('city')[0];//市 var a = document.getElementsByName('area')[0];//区 //绑定数据 s.bind(p,province); s.bind(c,city); s.bind(a,area); //确定从属关系 s.parent(p,c); s.parent(c,a); </script>
效果已经有了，不出意料的3级联动。不过呃，我来加个默认值吧。
s.selected(p,{value:'上海市'}); s.selected(c,{index:1}); s.selected(a,{text:'虹口区'});
效果：
选选看看值。
本例完整html代码：
<select name="pro"></select><select name="city"></select><select name="area"></select> <script type="text/javascript" src="selects.js"></script> <script type="text/javascript" src="data_china.js"></script> <script type="text/javascript"> var s = selects; //获取对象 var p = document.getElementsByName('pro')[0];//省 var c = document.getElementsByName('city')[0];//市 var a = document.getElementsByName('area')[0];//区 //绑定数据 s.bind(p,province); s.bind(c,city); s.bind(a,area); //确定从属关系 s.parent(p,c); s.parent(c,a); //设置默认值 s.selected(p,{value:'上海市'}); s.selected(c,{index:1}); s.selected(a,{text:'虹口区'}); </script>

第四个例子：一拖二测试

一个改变，2个跟着变，注意，设置默认值要放在后面：
<select name="b1"></select><select name="b2"></select><select name="b3"></select><select name="b4"></select><br/> <select name="c"></select> <script type="text/javascript" src="selects.js"></script> <script type="text/javascript" src="data_demo.js"></script> <script type="text/javascript"> var s = selects; var b11 = document.getElementsByName('b1')[0];//省份 var b21 = document.getElementsByName('b2')[0];//市 var b31 = document.getElementsByName('b3')[0];//区 var b41 = document.getElementsByName('b4')[0];//街道 //绑定数据 s.bind(b11,b1); s.bind(b21,b2); s.bind(b31,b3); s.bind(b41,b4); //确定从属关系 s.parent(b11,b21); s.parent(b21,b31); s.parent(b31,b41); //一拖二测试 var c1 = document.getElementsByName('c')[0]; s.bind(c1,c); s.parent(b11,c1); //设置默认值 s.selected(b11,{value:""}); //s.selected(b21,{index:0}); //s.selected(b31,{text:"闸北"}); </script>
效果：
看值。
收工。

It's all,thanks.