2013
Apr
09




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

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

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

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

全部内容

  1.  
  2. <div>
  3. 1. 第一层选单:
  4. <span id="text" style="margin: 10px 0 10px 0;">
  5. </span>
  6. </div>
  7.  
  8. <div>
  9. 2. 第二层选单:
  10. <span id="child" style="margin: 0 0 10px 0;">
  11. </span>
  12. </div>
  13.  
  14. <div>
  15. 3. 第三层选单:
  16. <span id="child2" style="margin: 0 0 10px 0;">
  17. </span>
  18. </div>
  19. <div>
  20. Show Result <br />
  21. <span id="result" style="margin: 0 0 10px 0;">
  22. </span>
  23. </div>
  24. </div>
  25. <script>
  26. var s = new PF_multiLevelSelector();
  27. s.addOption({id: "text", childId: "child", inputName: "a1", defaultValue: 2}, [":1:食品",":2:房子",":3:人名"]);
  28. s.addOption({id: "child", childId: "child2", inputName: "a2", defaultValue: 3}, ["1:1:零食类","1:2:正餐","2:3:豪宅","2:4:一般房子","3:5:名人","3:6:一般人"]);
  29.  
  30. 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:小王"]);
  31. s.showOne("text");
  32.  
  33. function test(E) {
  34. var node;
  35. node = E.currentTarget;
  36. $("#result").html("you select " + $(node).val());
  37. }
  38. </script>



目前回應 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)