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)