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

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