select2 默认不选中以及动态改变数据

2018-6-6 Jon
select2 使用总结

记录 select2 一般比较难查到的功能

加载数据并默认不选中

加载数据后动态改变数据（包含清空数据）
<br />
     <!DOCTYPE html><br />
      <html lang="en"><br />
      <head><br />
      <meta charset="UTF-8" /><br />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" /><br />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" /><br />
      <title>Document</title><br />
      <link href="https://cdn.bootcss.com/select2/4.0.5/css/select2.min.css" rel="stylesheet" /><br />
      <style type="text/css"><br />
              section {<br />
                  margin: 30px;<br />
              }<br />
              /* 重置了选择框样式 */<br />
              .form-control {<br />
                  width: 180px;<br />
              }<br />
              .select2-selection.select2-selection--single, .select2-search__field{<br />
                  outline: 0;<br />
              }<br />
              .select2-selection.select2-selection--single:focus, .select2-search__field:focus{<br />
                  border-color: #66afe9;<br />
                  outline: 0;<br />
                  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);<br />
                  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);<br />
              }<br />
              .select2-selection.select2-selection--single{<br />
                  display: block;<br />
                  width: 100%;<br />
                  height: 34px;<br />
                  font-size: 14px;<br />
                  line-height: 1.42857143;<br />
                  color: #555;<br />
                  background-color: #fff;<br />
                  background-image: none;<br />
                  border: 1px solid #ccc;<br />
                  border-radius: 4px;<br />
                  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);<br />
                  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);<br />
                  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;<br />
                  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;<br />
                  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;<br />
              }<br />
              .select2-container--default .select2-selection--single .select2-selection__rendered{<br />
                  line-height: 32px;<br />
              }<br />
              .select2-container--default .select2-selection--single .select2-selection__arrow{<br />
                  height: 32px;<br />
              }<br />
              button {<br />
                  margin: 10px 0;<br />
                  width: 100px;<br />
                  display: inline-block;<br />
                  padding: 6px 12px;<br />
                  margin-bottom: 0;<br />
                  font-size: 14px;<br />
                  font-weight: 400;<br />
                  line-height: 1.42857143;<br />
                  text-align: center;<br />
                  white-space: nowrap;<br />
                  vertical-align: middle;<br />
                  background-color: orange;<br />
                  color: #fff;<br />
                  -ms-touch-action: manipulation;<br />
                  touch-action: manipulation;<br />
                  cursor: pointer;<br />
                  -webkit-user-select: none;<br />
                  -moz-user-select: none;<br />
                  -ms-user-select: none;<br />
                  user-select: none;<br />
                  background-image: none;<br />
                  border: 1px solid transparent;<br />
                  border-radius: 4px;<br />
              }<br />
              button:focus {<br />
                  outline: 0;<br />
                  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(233, 231, 102, 0.6);<br />
                  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(233, 231, 102, 0.6);<br />
              }<br />
              .form-row {<br />
                  margin: 10px 0;<br />
              }<br />
          </style><br />
      </head><br />
      <body><br />
        <section><br />
          <form class="form" action="." method="post"><br />
            <div class="form-row"><br />
              <div class="form-label">普通使用</div><br />
              <select id="id_select01" name="hospital" class="form-control select2" placeholder="请选择" required=""> <option value="">--请选择--</option><br />
                  <option value="1">AA</option><br />
                  <option value="2">BB</option><br />
                  <option value="3">CC</option><br />
                  <option value="4">DD</option><br />
                  <option value="5">EE</option><br />
                  <option value="6">FF</option><br />
              </select> <br />
            </div><br />
            <div class="form-row"><br />
              <div class="form-label">动态加载数据</div><br />
              <select id="id_select02" name="hospital" class="form-control select2" placeholder="请选择" required=""></select> <br />
            </div><br />
            <div class="form-row"><br />
              <div class="form-label">加载数据并赋默认值</div><br />
              <select id="id_select03" name="hospital" class="form-control select2" placeholder="请选择" required=""></select> <br />
            </div><br />
            <div class="form-row"><br />
              <div class="form-label">加载数据并默认不选中</div><br />
              <select id="id_select04" name="hospital" class="form-control select2" placeholder="请选择" required=""></select> <br />
            </div><br />
            <div class="form-row"><br />
              <div class="form-label">加载数据后动态改变数据</div><br />
              <select id="id_select05" name="hospital" class="form-control select2" placeholder="请选择" required=""></select> <br />
            </div><br />
            <div><br />
              <button type="submit">提交</button><br />
            </div><br />
          </form><br />
        </section><br />
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script><br />
        <script src="https://cdn.bootcss.com/select2/4.0.5/js/select2.min.js"></script><br />
        <script><br />
          var data = [<br />
              {id: 'aaaa', text: 'aaaa'},<br />
              {id: 'bbb', text: 'bbbb'},<br />
              {id: 'ccc', text: 'ccccc'},<br />
              {id: 'ddd', text: 'ddddd', disabled:true}<br />
          ];<br />
          $('#id_select01').select2();<br />
          $('#id_select02').select2({<br />
              data: data,<br />
              placeholder:'请先选择--'<br />
          });<br />
          $('#id_select03').select2({<br />
              data: data,<br />
              placeholder:'请先选择--'<br />
          }).val('ccc').trigger('change');<br />
          $('#id_select04').select2({<br />
              data: data<br />
          }).val('').select2({placeholder:'请先选择--'});<br />
          $('#id_select05').select2({<br />
              data: data,<br />
              placeholder:'请先选择--'<br />
          });<br />
          $('#id_select05').html('');<br />
          $('#id_select05').select2({<br />
              data: [{id: '11', text: '111'}],<br />
              placeholder:'请先选择--'<br />
          });<br />
        </script><br />
      </body><br />
      </html><br />
您可以修改框中代码后运行查看
至于滚动加载、多选、ajax获取数据官网都有演示，这里不做多余演）

相关链接

https://select2.org

https://github.com/select2/select2
发表评论：