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

2018-6-6 Jon js库

select2 使用总结
记录 select2 一般比较难查到的功能
加载数据并默认不选中
加载数据后动态改变数据（包含清空数据）

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

您可以修改框中代码后运行查看

至于滚动加载、多选、ajax获取数据官网都有演示，这里不做多余演）
相关链接
https://select2.org
https://github.com/select2/select2

标签: select2

分享这篇文章

赞助鼓励：如果觉得内容对您有所帮助，您可以支付宝(左)或微信(右)：

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

下一篇Angular 模块懒加载和预加载策略
上一篇angular 如何在打包发布时清除console信息

发表评论：

知向前端

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

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

搜索

日历

最新微语

最新评论

分类

随机文章

最新文章

热门文章

存档