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 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>
