彰化一整天的論壇

 找回密碼
 立即註冊
查看: 62|回復: 0

轉貼:bootstrap dual listbox

[複製鏈接]
發表於 2019-6-21 09:03:45 | 顯示全部樓層 |閱讀模式
  1. <!DOCTYPE html>
  2. <html lang="en">

  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
  8.     <link rel="stylesheet" href="bootstrap-duallistbox/bootstrap-duallistbox.css">
  9.     <script src="jquery/jquery.js"></script>
  10.     <script src="bootstrap/js/bootstrap.js"></script>
  11.   
  12.     <script src="bootstrap-duallistbox/jquery.bootstrap-duallistbox.js"></script>
  13.     <title>列表</title>
  14. </head>

  15. <body>
  16.     <div class="col-md-7">
  17.         <form id="test">
  18.             <select multiple="multiple" name="list" id="list">
  19.                 <option value="1">1</option>
  20.                 <option selected value="2">2</option>
  21.                 <option value="3">3</option>
  22.                 <option value="4">4</option>
  23.                 <option selected value="5">5</option>
  24.                 <option value="6">6</option>
  25.                 <option selected value="7">7</option>
  26.                 <option value="8">8</option>
  27.                 <option value="9">9</option>
  28.                 <option value="10">10</option>
  29.                 <option value="11">11</option>
  30.                 <option selected value="12">12</option>
  31.                 <option value="13">13</option>
  32.                 <option value="14">14</option>
  33.                 <option selected value="15">15</option>
  34.                 <option value="16">16</option>
  35.                 <option selected value="17">17</option>
  36.                 <option value="18">18</option>
  37.                 <option value="19">19</option>
  38.                 <option value="20">20</option>
  39.             </select>

  40.             <button id="button" type="button" class="btn btn-large btn-block btn-default">提交</button>

  41.         </form>
  42.     </div>

  43.     <script>
  44.         // 设置
  45.         $('#list').bootstrapDualListbox({
  46.             nonSelectedListLabel: '已有角色',
  47.             selectedListLabel: '未有角色',
  48.             preserveSelectionOnMove: 'moved',
  49.             moveOnSelect: false, //出现一个剪头,表示可以一次选择一个
  50.             //nonSelectedFilter: '1', //nonSelectedFilter的过滤器
  51.             //selectedFilter: '2', //nonSelectedFilter的过滤器
  52.             // bootstrap2Compatible: true,
  53.             filterTextClear: '展示所有',
  54.             moveSelectedLabel: "添加",
  55.             moveAllLabel: '添加所有',
  56.             removeSelectedLabel: "移除",
  57.             removeAllLabel: '移除所有',
  58.             infoText: '共{0}个',
  59.             showFilterInputs: false,
  60.         })

  61.         //方法
  62.         $('#button').click(function() {
  63.             console.log($('[name="list"]').val()) //打印所选中的值
  64.             $('#list').bootstrapDualListbox('destroy') //destroy整个列表
  65.             $('#list').bootstrapDualListbox('refresh', true) //destroy整个列表
  66.         })
  67.     </script>
  68. </body>

  69. </html>
複製代碼
文章來源: https://www.jianshu.com/p/12de38d7d596
回復

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則

 ㄚ母滴雞湯
 員林香純滴雞精

Archiver|手機版|小黑屋|彰化一整天的論壇(Excel,Office)  |网站地图

GMT+8, 2019-8-25 10:58 , Processed in 0.149367 second(s), 19 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表