首页>>表单>>input框 select复选和单选，树形菜单供选择(2019-05-04)

input框 select复选和单选，树形菜单供选择

input框 select复选和单选，树形菜单供选择
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="container">  
  2.   <div class="row">  
  3.     <div class="col-lg-6">  
  4.       <h3>Multi Selection</h3>  
  5.       <input type="text" id="justAnInputBox" placeholder="Select"/>  
  6.     </div>  
  7.     <div class="col-lg-6">  
  8.       <h3>Single Selection</h3>  
  9.       <input type="text" id="justAnotherInputBox" placeholder="Type to filter"/>  
  10.     </div>  
  11.   </div>  
  12. </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.   
  3. var SampleJSONData = [  
  4.     {  
  5.         id: 0,  
  6.         title: 'choice 1  '  
  7.     }, {  
  8.         id: 1,  
  9.         title: 'choice 2',  
  10.         subs: [  
  11.             {  
  12.                 id: 10,  
  13.                 title: 'choice 2 1'  
  14.             }, {  
  15.                 id: 11,  
  16.                 title: 'choice 2 2'  
  17.             }, {  
  18.                 id: 12,  
  19.                 title: 'choice 2 3'  
  20.             }  
  21.         ]  
  22.     }, {  
  23.         id: 2,  
  24.         title: 'choice 3'  
  25.     }, {  
  26.         id: 3,  
  27.         title: 'choice 4'  
  28.     }, {  
  29.         id: 4,  
  30.         title: 'choice 5'  
  31.     }, {  
  32.         id: 5,  
  33.         title: 'choice 6',  
  34.         subs: [  
  35.             {  
  36.                 id: 50,  
  37.                 title: 'choice 6 1'  
  38.             }, {  
  39.                 id: 51,  
  40.                 title: 'choice 6 2',  
  41.                 subs: [  
  42.                     {  
  43.                         id: 510,  
  44.                         title: 'choice 6 2 1'  
  45.                     }, {  
  46.                         id: 511,  
  47.                         title: 'choice 6 2 2'  
  48.                     }, {  
  49.                         id: 512,  
  50.                         title: 'choice 6 2 3'  
  51.                     }  
  52.                 ]  
  53.             }  
  54.         ]  
  55.     }, {  
  56.         id: 6,  
  57.         title: 'choice 7'  
  58.     }  
  59. ];  
  60. var comboTree1, comboTree2;  
  61.   
  62. jQuery(document).ready(function($) {  
  63.   
  64.         comboTree1 = $('#justAnInputBox').comboTree({  
  65.             source : SampleJSONData,  
  66.             isMultiple: true  
  67.         });  
  68.   
  69.         comboTree2 = $('#justAnotherInputBox').comboTree({  
  70.             source : SampleJSONData,  
  71.             isMultiple: false  
  72.         });  
  73. });  
  74.   
  75.   
  76. </script>  

 


原文地址:http://www.freejs.net/article_biaodan_760.html