select2单选多选取值赋值与设置初始化默认值

姜瑞涛JavaScript工具库

select2是一个非常好用的JavaScript下拉选择库，我们来看一下如何使用select2进行单选和多选的取值赋值与设置初始化默认值。

我们先看select2如何进行取值。select2的取值与jQuery的方式是一样的，用的是$("xxx").val()方法。下面的第1个例子是单选取值时的代码和浏览器输出的示例图，选择上海后点击按钮，浏览器控制台输出"200"。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="select2.min.css">
</head>
<body>
<div>
<select class="demo">
</select>
<br>
<br>
<button class="demo-button">点击后控制台输出所选值</button>
</div>
<script src="jquery.min.js"></script>
<script src="select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var data = [
{
id: 100,
text: '北京'
},
{
id: 200,
text: '上海'
},
{
id: 300,
text: '深圳'
}
];
$(".demo").select2({
data: data,
placeholder: "请选择",
width: '200'
});
$('.demo-button').click(function () {
var result = $(".demo").val();
console.log(result)
})
});
</script>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="select2.min.css"> </head> <body> <div> <select class="demo"> </select> <br> <br> <button class="demo-button">点击后控制台输出所选值</button> </div> <script src="jquery.min.js"></script> <script src="select2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var data = [ { id: 100, text: '北京' }, { id: 200, text: '上海' }, { id: 300, text: '深圳' } ]; $(".demo").select2({ data: data, placeholder: "请选择", width: '200' }); $('.demo-button').click(function () { var result = $(".demo").val(); console.log(result) }) }); </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="select2.min.css">
</head>
<body>
  <div>
    <select class="demo">
    </select>
    <br>
    <br>
    <button class="demo-button">点击后控制台输出所选值</button>
  </div>

  <script src="jquery.min.js"></script>
  <script src="select2.min.js"></script>
  <script type="text/javascript">
      $(document).ready(function() {
        var data = [
          {
            id: 100,
            text: '北京'
          },
          {
            id: 200,
            text: '上海'
          },
          {
            id: 300,
            text: '深圳'
          }
        ];


        $(".demo").select2({
          data: data,
          placeholder: "请选择",
          width: '200'
          
        });

        $('.demo-button').click(function () {
          var result = $(".demo").val();
          console.log(result)
        })
      });
  </script>
</body>
</html>
select2单选多选取值赋值与设置初始化默认值-姜瑞涛

下面是第2个例子是select2多选取值时的代码和浏览器输出的示例图，选择北京和上海后点击按钮，浏览器控制台输出["100", "200"]。 多选比单选只是在select元素属性上多加了multiple="multiple"。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="select2.min.css">
</head>
<body>
<div>
<select class="demo" multiple="multiple">
</select>
<br>
<br>
<button class="demo-button">点击后控制台输出所选值</button>
</div>
<script src="jquery.min.js"></script>
<script src="select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var data = [
{
id: 100,
text: '北京'
},
{
id: 200,
text: '上海'
},
{
id: 300,
text: '深圳'
}
];
$(".demo").select2({
data: data,
placeholder: "请选择",
width: '200'
});
$('.demo-button').click(function () {
var result = $(".demo").val();
console.log(result)
})
});
</script>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="select2.min.css"> </head> <body> <div> <select class="demo" multiple="multiple"> </select> <br> <br> <button class="demo-button">点击后控制台输出所选值</button> </div> <script src="jquery.min.js"></script> <script src="select2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var data = [ { id: 100, text: '北京' }, { id: 200, text: '上海' }, { id: 300, text: '深圳' } ]; $(".demo").select2({ data: data, placeholder: "请选择", width: '200' }); $('.demo-button').click(function () { var result = $(".demo").val(); console.log(result) }) }); </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="select2.min.css">
</head>
<body>

  <div>
    <select class="demo" multiple="multiple">
    </select>
    <br>
    <br>

    <button class="demo-button">点击后控制台输出所选值</button>
  </div>

  <script src="jquery.min.js"></script>
  <script src="select2.min.js"></script>

  <script type="text/javascript">
      $(document).ready(function() {

        var data = [
          {
            id: 100,
            text: '北京'
          },
          {
            id: 200,
            text: '上海'
          },
          {
            id: 300,
            text: '深圳'
          }
        ];

        $(".demo").select2({
          data: data,
          placeholder: "请选择",
          width: '200'
          
        });

        $('.demo-button').click(function () {
          var result = $(".demo").val();
          console.log(result)
        })
      });
  </script>
</body>
</html>
select2单选多选取值赋值与设置初始化默认值02-姜瑞涛

接下来是select2如何赋值和设置初始化默认值。其实赋值和设置初始默认值本质是一样的，设置初始值只是在页面加载的时候进行的赋值而已。 赋值的核心方法如下 $("xxx").val(yyy).trigger('change')。 下面是第3个例子，select2赋值单选，我们在加载页面的时候，通过给.deom设置"200"，让它选中了上海。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="select2.min.css">
</head>
<body>
<div>
<select class="demo" multiple="multiple">
</select>
</div>
<script src="jquery.min.js"></script>
<script src="select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var data = [
{
id: 100,
text: '北京'
},
{
id: 200,
text: '上海'
},
{
id: 300,
text: '深圳'
}
];
$(".demo").select2({
data: data,
placeholder: "请选择啊",
width: '240'
});
$(".demo").val('200').trigger('change')
});
</script>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="select2.min.css"> </head> <body> <div> <select class="demo" multiple="multiple"> </select> </div> <script src="jquery.min.js"></script> <script src="select2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var data = [ { id: 100, text: '北京' }, { id: 200, text: '上海' }, { id: 300, text: '深圳' } ]; $(".demo").select2({ data: data, placeholder: "请选择啊", width: '240' }); $(".demo").val('200').trigger('change') }); </script> </body> </html>
<!DOCTYPE html>
  <html lang="en">
  <head>
    <link rel="stylesheet" href="select2.min.css">
  </head>
  <body>

    <div>
      <select class="demo" multiple="multiple">
      </select>
    </div>

    <script src="jquery.min.js"></script>
    <script src="select2.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {

          var data = [
            {
              id: 100,
              text: '北京'
            },
            {
              id: 200,
              text: '上海'
            },
            {
              id: 300,
              text: '深圳'
            }
          ];

          $(".demo").select2({
            data: data,
            placeholder: "请选择啊",
            width: '240'
            
          });

          $(".demo").val('200').trigger('change')
        });
    </script>

  </body>
  </html>
select2单选多选取值赋值与设置初始化默认值03-姜瑞涛

下面是第4个例子，select2赋值多选。同样给select元素标签设置multiple="multiple"，我们在加载页面的时候，通过给.deom设置["200", "300"]，让它选中了上海和深圳。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="select2.min.css">
</head>
<body>
<div>
<select class="demo" multiple="multiple">
</select>
</div>
<script src="jquery.min.js"></script>
<script src="select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var data = [
{
id: 100,
text: '北京'
},
{
id: 200,
text: '上海'
},
{
id: 300,
text: '深圳'
}
];
$(".demo").select2({
data: data,
placeholder: "请选择啊",
width: '240'
});
$(".demo").val(["200", "300"]).trigger('change')
});
</script>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="select2.min.css"> </head> <body> <div> <select class="demo" multiple="multiple"> </select> </div> <script src="jquery.min.js"></script> <script src="select2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var data = [ { id: 100, text: '北京' }, { id: 200, text: '上海' }, { id: 300, text: '深圳' } ]; $(".demo").select2({ data: data, placeholder: "请选择啊", width: '240' }); $(".demo").val(["200", "300"]).trigger('change') }); </script> </body> </html>
<!DOCTYPE html>
  <html lang="en">
  <head>
    <link rel="stylesheet" href="select2.min.css">
  </head>
  <body>

    <div>
      <select class="demo" multiple="multiple">
      </select>
    </div>

    <script src="jquery.min.js"></script>
    <script src="select2.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {

          var data = [
            {
              id: 100,
              text: '北京'
            },
            {
              id: 200,
              text: '上海'
            },
            {
              id: 300,
              text: '深圳'
            }
          ];

          $(".demo").select2({
            data: data,
            placeholder: "请选择啊",
            width: '240'
            
          });

          $(".demo").val(["200", "300"]).trigger('change')
        });
    </script>

  </body>
  </html>
select2单选多选取值赋值与设置初始化默认值04-姜瑞涛

好了，以上就是关于select2单选多选取值赋值与设置初始化默认值的内容了，希望对大家有帮助。

原文链接：https://www.jiangruitao.com/library/select2-get-set-init-value/
版权采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议 转载需注明原文作者、链接与版权协议

笔记与思考

发表评论

邮箱地址不会被公开。 必填项已用*标注