1.引入select2插件实现数据过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <link href="./select2.css" rel="stylesheet" /> -->
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<title>select2测试</title>
</head>
<body>
<select class="singleSelect" style="width: 220px;height:40px;" id="userId">
<option value="">--请选择--</option>
</select>
<!-- <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script src="./select2.js"></script> -->
<script type="text/javascript">
let selectArr = [{
"id": 1,
"text": "江南"
},
{
"id": 2,
"text": "杭州"
},
{
"id": 3,
"text": "上海"
},
{
"id": 4,
"text": "北京"
},
{
"id": 5,
"text": "深圳"
},
{
"id": 6,
"text": "浙江"
},
{
"id": 7,
"text": "河南"
},
{
"id": 8,
"text": "江苏"
}
];
$(document).ready(function() { //加载页面时执行select2
$('#userId').select2({
language: {
noResults: function(params) {
return "未找到该数据";
}
},
placeholder: "请选择",
allowClear: false,//是否开启删除按钮
data: selectArr
});
//获取当前选中项的值的值
$('#userId').change(function(){
console.log('当前选择',$("#userId option:checked").val(),$("#userId option:checked").text());
});
//select2数据回显 如要显示河南 只需要将河南对应的id传进去就行
$('#userId').val(7).trigger('change');
});
</script>
</body>
</html>
网友评论