多層選單(國家，縣市，鄉鎮選擇)

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