官网：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(""); }); }); /* 获取选择项绑定的数据 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>
标签：function,text,state,使用,var,data,select2 From： https://www.cnblogs.com/zcfsky/p/17810474.html