select2的使用
官网：Ajax (remote data) | Select2 - The jQuery replacement for select boxes
<!DOCTYPE html>
<html>
<head>
<title>select2使用方法</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/select2/4.0.13/css/select2.min.css" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/select2/4.0.13/js/select2.full.min.js"></script>
<script>
$(function(){
$("#ddlProduct").select2({
//tags:true,//可以输入增加项
allowClear:true,//允许清空
placeholder:"选择商品",
ajax: {
url: "data/Products.json",
data: function (params) {
var query = {
//参数
IsHot: $("#cbIsHot").val(),
Name: params.term,
page: params.page || 1
}
return query;
}, processResults: function (data) {
//必须设置id,text，否则无法选择
data.forEach(d=>{
d.id = d.ProductID;
d.text = d.ProductName
})
var result = {results:data}
//分页判断是否有更多
//result.pagination = {more : false};
return result;
}
},
templateResult: function (state) {
//下拉自定义
var ss = [state.ProductName+(state.IsHot?"[热]":"")];
if (state.ISBN && ss.indexOf(state.ISBN) == -1) {
ss.push("<br/>ISBN:" + state.ISBN);
}
if (state.Pages) {
ss.push("<br/>页码:" + state.Pages);
}
return ss.join("");
},
escapeMarkup: function (m) {
// Do not escape HTML in the select options text
return m;
},
});
$('#ddlProduct').on('select2:select', function (e) {
var prod = e.params.data;
$("#prodName").text(prod.ProductName);
$("#prodPrice").text(prod.PromoPrice||prod.Price);
});
$('#ddlProduct').on('select2:clear', function (e) {
//清除当前选项，否则保留的是初始化值
$(this).empty();
$("#prodName,#prodPrice").text("");
//取消清空 e.params.prevented=true;
});
});
/*
获取选择项绑定的数据
var items = $('#ddlProduct').select2("data")
//数组
var selectItem = items[0]
重新初始化，需要先销毁，再设置参数
$("#ddlProduct").empty().select2("destroy").select2({
allowClear:false,
data:[{
id:1,
text:"选项1"
},{
id:2,
text:"选项2"
},]
});
*/
</script>
</head>
<body>
<input type="checkbox" value="1" name="IsHot" id="cbIsHot" /><label for="cbIsHot">热销</label>
<select id="ddlProduct" name="ProductID" style="width:260px;">
<option id="0" selected>默认商品</option>
</select>
<div>
选中项 <span id="prodName">默认商品</span> 售价:<span id="prodPrice">0</span>￥
</div>
</body>
</html>
