jquery select2优化下拉多选框
要使用jQuery Select2来优化下拉多选框,首先需要引入Select2的CSS和JavaScript文件。以下是一个基本的实例代码:
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<select id="mySelect" 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>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script>
$(document).ready(function() {
$('#mySelect').select2();
});
</script>
</body>
</html>
这段代码中,我们首先通过<link>
标签引入了Select2的CSS样式,然后在<body>
中使用了一个<select>
元素,并设置了multiple
属性以支持多选。在<script>
标签内,我们引入了jQuery和Select2的JavaScript文件,并在文档加载完成后初始化了Select2插件。这样就可以使用Select2提供的优化后的下拉多选框了。
评论已关闭