多层选单(国家，县市，乡镇选择)

Tags:

繁中版

网页好读版

网页常常会有国家，县市，乡镇的选择，而且选了其中一个国家之后，县市还要能够出现对应的变化，再来是选择了其中一个县市，乡镇又要出现相对应的变化。

类似的功能并不是很难实作，只是每次要用到的时候，就要重写一次，或是为了不同的功能，而修改程式。

我写了一个可以无限层级的选单，理论上你想要几个层级都可以。

Demo Example

1. 第一层选单：

2. 第二层选单：

3. 第三层选单：

Show Result

multi Level Selector Library 使用方式

第一步载入 multiLevelSelector.js
第二步宣告 multiLevelSelector Obj ： new PF_multiLevelSelector()
第三步

加入第一层选单 obj.addOption(attr1, data1);
加入第二层选单 obj.addOption(attr2, data2);
加入第三层选单 obj.addOption(attr3, data3);

第四步 render 页面： obj.showOne(TagID);

File Download

JS File ：multiLevelSelector.js

全部内容

 
<div>
   1. 第一层选单： 
   <span id="text" style="margin: 10px 0 10px 0;">
    
   </span>
</div>
 
<div>
   2. 第二层选单： 
   <span id="child" style="margin: 0 0 10px 0;">
   </span>
</div>
 
<div>
   3. 第三层选单： 
   <span id="child2" style="margin: 0 0 10px 0;">
   </span>
</div>
<div>
   Show Result <br />
   <span id="result" style="margin: 0 0 10px 0;">
   </span>
</div>
</div>
<script>
 var s = new PF_multiLevelSelector();
 s.addOption({id: "text", childId: "child", inputName: "a1", defaultValue: 2}, [":1:食品",":2:房子",":3:人名"]);
 s.addOption({id: "child", childId: "child2", inputName: "a2", defaultValue: 3}, ["1:1:零食类","1:2:正餐","2:3:豪宅","2:4:一般房子","3:5:名人","3:6:一般人"]);
 
 
 s.addOption({id: "child2", inputName: "a3", defaultValue: 9, selectFunction: test}, ["1:1:饼干","1:2:豆干","2:3:肉","3:4:千万豪宅","4:5:百万宅","5:6:郭台民","5:7:马小九","6:8:小明","3:9:千万别墅", "6:10:小王"]); 
 s.showOne("text");
 
function test(E) {
    var node;
    node = E.currentTarget;
    $("#result").html("you select " + $(node).val());
}
</script>

网页好读版

This post was last modified by puritys 2013/04/14