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>
下面是第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>
接下来是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>
下面是第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>
好了，以上就是关于select2单选多选取值赋值与设置初始化默认值的内容了，希望对大家有帮助。
版权采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议 转载需注明原文作者、链接与版权协议
笔记与思考