首页>>Jquery文字>>Jquery 带搜索分组穿梭框并返回值的一个演示(2019-04-26)

Jquery 带搜索分组穿梭框并返回值的一个演示

Jquery 带搜索分组穿梭框并返回值的一个演示
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="container">  
  2.         <div>  
  3.         Selected: <span id="selectedItemSpan"></span>  
  4.     </div>  
  5.     <div class="transfer"></div>  
  6.   
  7. </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.     var languages = [  
  3.         {  
  4.             "language": "jQuery",  
  5.             "value": 122  
  6.         },  
  7.         {  
  8.             "language": "AngularJS",  
  9.             "value": 132  
  10.         },  
  11.         {  
  12.             "language": "ReactJS",  
  13.             "value": 422  
  14.         },  
  15.         {  
  16.             "language": "VueJS",  
  17.             "value": 232  
  18.         },  
  19.         {  
  20.             "language": "JavaScript",  
  21.             "value": 765  
  22.         },  
  23.         {  
  24.             "language": "Java",  
  25.             "value": 876  
  26.         },  
  27.         {  
  28.             "language": "Python",  
  29.             "value": 453  
  30.         },  
  31.         {  
  32.             "language": "TypeScript",  
  33.             "value": 125  
  34.         },  
  35.         {  
  36.             "language": "PHP",  
  37.             "value": 633  
  38.         },  
  39.         {  
  40.             "language": "Ruby on Rails",  
  41.             "value": 832  
  42.         }  
  43.     ];  
  44.   
  45.     var groupData = [  
  46.         {  
  47.             "groupName": "JavaScript",  
  48.             "groupData": [  
  49.                 {  
  50.                     "language": "jQuery",  
  51.                     "value": 122  
  52.                 },  
  53.                 {  
  54.                     "language": "AngularJS",  
  55.                     "value": 643  
  56.                 },  
  57.                 {  
  58.                     "language": "ReactJS",  
  59.                     "value": 422  
  60.                 },  
  61.                 {  
  62.                     "language": "VueJS",  
  63.                     "value": 622  
  64.                 }  
  65.             ]  
  66.         },  
  67.         {  
  68.             "groupName": "Popular",  
  69.             "groupData": [  
  70.                 {  
  71.                     "language": "JavaScript",  
  72.                     "value": 132  
  73.                 },  
  74.                 {  
  75.                     "language": "Java",  
  76.                     "value": 112  
  77.                 },  
  78.                 {  
  79.                     "language": "Python",  
  80.                     "value": 124  
  81.                 },  
  82.                 {  
  83.                     "language": "TypeScript",  
  84.                     "value": 121  
  85.                 },  
  86.                 {  
  87.                     "language": "PHP",  
  88.                     "value": 432  
  89.                 },  
  90.                 {  
  91.                     "language": "Ruby on Rails",  
  92.                     "value": 421  
  93.                 }  
  94.             ]  
  95.         }  
  96.     ];  
  97.   
  98.     var settings = {  
  99.         "inputId": "languageInput",  
  100.         "data": languages,  
  101.         "groupData": groupData,  
  102.         "itemName": "language",  
  103.         "groupItemName": "groupName",  
  104.         "groupListName" : "groupData",  
  105.         "container": "transfer",  
  106.         "valueName": "value",  
  107.         "callable" : function (data, names) {  
  108.             console.log("Selected ID：" + data)  
  109.             $("#selectedItemSpan").text(names)  
  110.         }  
  111.     };  
  112.   
  113.     Transfer.transfer(settings);  
  114. </script>  
  115. </html>  

 


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