multiple-select/site/website/static/templates/custom-dropdown-width.html at d3483f795df10d85bff1da4e0032f48fffc34a12 · Domingla/multiple-select · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<script>
  init({
    title: 'Custom Dropdown Width',
    desc: 'Use <code>dropWidth: 580</code> option to custom the dropdown width, or use <code>width: \'auto\'</code> option to auto adjust the width based on the selected text.',
    links: ['multiple-select.min.css'],
    scripts: ['multiple-select.min.js']
  })
</script>
<div>
  <div class="mb-3 row">
    <label class="col-sm-2">
      Basic Select
    </label>

    <div class="col-sm-10">
      <select name="basic" multiple="multiple">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
      </select>
    </div>
  </div>

  <div class="mb-3 row">
    <label class="col-sm-2">
      Auto width
    </label>

    <div class="col-sm-10">
      <select name="auto-width">
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
        <option value="4">Fourth</option>
      </select>
    </div>
  </div>
</div>

<script>
  function mounted() {
    $('select[name="basic"]').multipleSelect({
      multiple: true,
      width: 500,
      multipleWidth: 70,
      dropWidth: 580
    })

    $('select[name="auto-width"]').multipleSelect({
      width: 'auto'
    })
  }
</script>