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

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

目前回應 Comments(1 comments)

禮節 2016/09/27

你好，請問您一個問題：

我最近在學jQuery，覺得有點難，不太好理解，看到那些程式碼，頭就開始暈。

公司裡的工程師，他告訴我，要先有javascript的基礎，至少也要懂"迴圈"了，再碰jQuery，才是正確的學習道路。

請問您，這是真的嗎？

學jQuery前，要先有javascript的中階基礎，才來學，才是正確的學習之道？

另外，可否分享給我，你本身如何學jQuery跟javascript的過程？

感謝您撥空閱讀、謝謝！
Reply

Admin

我個人是先學 JavaScript ，過了好多年才學 jQuery ，jQuery 只是 JavaScript 中的一種 Library ，其它還有很多 Library 可以學習，例如 underscore, backbone, prototype.js, ember.js, react, angularjs 。

先學好 JavaScript 再來學 jQuery 會是比較好的學習方式，但也不是一定要這樣，要先評估看看你的需求是什麼，如果你是一位設計師想學了解前端開發，那麼 HTML, CSS 會是比較重要的課題，跳過 JavaScript 學一點 jQuery 並不過份，但是如果你要當一個前端工程師，這時 JavaScript 就變成是必學的語言，那為何不從 JavaScript 先學起呢?

英文可以的話，可以在 W3C 上學習 JavaScript

http://www.w3schools.com/js/

回應 (Leave a comment)

Name

E-mail

Message