Select2下拉框

2024-01-27 12:32
文章标签 下拉框 select2

本文主要是介绍Select2下拉框，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

官网：http://select2.github.io/ 

一.文件需要引入select2.full.js、select2.min.css（4.0.1版本）和jquery.1.8.3及以上

最新版本的select2如果引用的jquery版本较低的话，某些功能无法正常使用。比如：清除功能allowClear: true

最新版本请使用<select></select>标签（对于本地化的数据你可以使用input，但ajax远程数据必须使用select）

二.placeholder

placeholder占位提示文字，如果需要清除功能，则必须设置placeholder。

三.加载本地数据

select2默认的数据属性是id、text，新版本可以自定义，但还是用默认的比较好。所以提供的json中最好转换为id、text形式，当然可以添加其他属性。

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
$("#c01-select").select2({data: data,placeholder:'请选择',allowClear:true
})

四.加载远程数据

$("#c01-select").select2({ajax: {url: "data.json",dataType: 'json',delay: 250,data: function (params) {return {q: params.term,};},processResults: function (data) {return {results: data};},cache: true},escapeMarkup: function (markup) { return markup; }, minimumInputLength: 1,templateResult: formatRepo, templateSelection: formatRepoSelection 
});

说明：

     1.q: params.term 查询参数（params.term表示输入框中内容，q发生到服务器的参数名；所以这里你可以添加自定义参数，如：stype:'person'）

     2.processResults中results: data返回数据（返回最终数据给results，如果我的数据在data.res下，则返回data.res。这个与服务器返回json有关）

     3.minimumInputLength 最小需要输入多少个字符才进行查询，与之相关的maximumSelectionLength表示最大输入限制。

     4.escapeMarkup字符转义处理

     5.templateResult返回结果回调function formatRepo(repo){return repo.text},这样就可以将返回结果的的text显示到下拉框里，当然你可以return repo.text+"1";等

     6.templateSelection选中项回调function formatRepoSelection(repo){return repo.text}

     7.关于返回的 json的格式：select2默认json格式为[{id:1,text:'text'},{id:2,text:'text'}]，新版严格要求这样的格式，当然你可以添加列，如：[{id:1,text:'text',name:'liu'}]

五.获取选中项

var res=$("#c01-select").select2("data")[0] ; //单选
var reslist=$("#c01-select").select2("data");    //多选
if(res==undefined)
{alert("你没有选中任何项");
}
if(reslist.length)
{alert("你选中任何项");
}

六.清空选择项和设置不可用

//清空选择
$("#c01-select").val(null).trigger("change");
$("#c01-select").val("你的placeholder").trigger("change");//或者
//如果你使用的是input标签（默认就是本地数据），你可以用$("#c01-select").val('');来清空选项
//disabled
$("#c01-select").prop("disabled", false);//可用
$("#c01-select").prop("disabled", true);//不可用

七.启用多选

$("#c01-select").select2({data:data,multiple: true
});


八.下面简单说明新版与老版对比

1.结果回调和选中回调名称：formatResult、formatSelection（老版）；templateResult、templateSelection（新版）

2.初始化：

//老版，注意如果初始化时文本框中本身没有值（为空），则不会触发该方法
initSelection: function (element, callback) {var id = $(element).val();var data = { id: id, text: id};//这里是初始化的数据，你可以通过id来从服务器上获取（ajax），再装载进去callback(data);
}

//新版，直接给select添加option
$("#id").append(new Option("Jquery", 10001, false, true));
//或者
$("#id").append("<option value='10001'>Jquery</option>");

3.获取或设置值：select2("val")（老版）；$("select").val()（新版）

推荐使用

var res = $("#id").select2("data");
//返回数组，单选就取res[0]；好处是不进可以获取id、text还可以获取其他属性，如res[0].names

4.停用或启用：$("select").enable(false);（老版）；$("select").prop("disabled", true);（新版）

5.主题样式：新版的样式已经更新，但如果想使用老版样式则可以设置 theme: "classic"

用得较多绑定插件有avalon、Vue等

尽量不要直接绑定到select标签上，当然本地数据的input还是可以的，在 change事件中手动赋值

$("#select2-id").select2({templateResult : formatState, // 列表带图片templateSelection : formatState, // 选中的带图片language: "zh-CN", //设置 提示语言width: "100%", //设置下拉框的宽度placeholder: "请选择", // 空值提示内容，选项值为 null//placeholder: {id: '', text: "请选择"}, // 同上，这里默认空值为 ''minimumInputLength: 10  //最小需要输入多少个字符才进行查询allowClear: true, //是否允许清空选中tags: false,  //设置必须存在的选项 才能选中，设置不存在的值则为null,如果 placeholder: {id: '', text: "请选择"} 则为 ''selectOnClose: true, // 如果没有手动选中，下拉框消失后会自动选中被hover的选项 （不建议使用）closeOnSelect: false, // 选择后下拉框不会关闭（单选-不建议使用）minimumResultsForSearch: Infinity, // 隐藏搜索框theme: "classic", // 样式maximumSelectionLength: 3,  // 多选 - 设置最多可以选择多少项tokenSeparators: [',', ' '], // 多选 - 输入逗号和空格会自动完成一个选项 前提是：tags: true
});

 移除select2

$("#select2-id").select2("destroy");

 

| 清空下拉框列表值

$("#select2-id").empty();

 

| 设置下拉列表 


// 单选 - 必须有一项为空值，否则默认选择第一项（如果必须选择一项可以不设置空值）
$("#select2-id").append($("<option>", {value: '', text: '全部'}));
$("#select2-id").append($("<option>", {value: 'value1', text: 'text1'}));
$("#select2-id").append($("<option>", {value: 'value2', text: 'text2'}));// 多选 - 不能有一项为空值，否则再清空时会出BUG
$("#select2-id").append($("<option>", {value: 'value1', text: 'text1'}));
$("#select2-id").append($("<option>", {value: 'value2', text: 'text2'}));

 

| 赋值说明：赋值会触发change事件

// 赋值 - 单选
$("#select2-id").val('value').trigger("change");
// 赋值 - 多选
$("#select2-id").val(['value1','value2']).trigger("change");

 

| 获取选中值

// 多选返回数组，单选返回字符串
$("#select2-id").val();


下面是个人代码

HTML

 <td id="tdType">@Html.TextBox("GoodsQuestionTypeIds", " ", new { @class = "select2 form-control input-sm", @readonly = "readonly", QuestionTypeData = @entity.QuestionTypeData })</td>

JS

  function initSelect2Data($ct, value) {//参数:控件JQuery对象,  初始值if (value == "[]") {$ct.removeAttr("readonly");}$ct.select2({placeholder: "请选择商品问题类型(多选)",minimumInputLength: 0,multiple: true,formatSelection: function (item) { return item.text; },         // 选择结果中的显示formatResult: function (item) { return item.text; },            // 搜索列表中的显示initSelection: function (element, callback) {value = value.replace(/\"/g, "\""); // 替换ViewBag转意的双引号var obj = $.parseJSON(value);callback(obj);},ajax: {url: "/AfterSale/GetQuestionSelect2Data",                             // 异步请求地址dataType: "json",async: true,data: function (term, page) {return { "term": term };},results: function (data, page) { return data; },            // 构造返回结果escapeMarkup: function (m) { return m; }                    // 字符转义处理}});}

JS添加克隆行

    //添加按钮复制行事件function trAdd(btn) {var $btn = $(btn);var newTr = $btn.parent().parent().clone();//克隆行内容初始化newTr.find('#GoodsQuestionManageId').val('0');newTr.find('#QuestionQuantity').val('');newTr.find('#Remarks').val('');newTr.find('#tdType').html($('<input type="text" id="GoodsQuestionTypeIds" name="GoodsQuestionTypeIds" value=" " class="select2 form-control input-sm" />'));newTr.insertAfter($btn.parent().parent());//把克隆行插入到当行后initSelect2Data(newTr.find('input[name=GoodsQuestionTypeIds]'), '[]');}

JS页面加载后给所有select2框事件

  // 初始化select2控件$("input[name=GoodsQuestionTypeIds]").each(function (i) {var $ct = $(this);var value = $ct.attr("QuestionTypeData");//初始化多选补全框的数据源,查找输入的数据来源于ajaxinitSelect2Data($ct, value);});

后台:循环构建初始化数据

  foreach (GoodsQuestionManageModel model in list){string strTypeIds = "," + model.GoodsQuestionTypeIds.Trim(',') + ",";var listTypeData = questionTypeData.OrderBy(q => q.GoodsQuestionTypeId).Where(q => strTypeIds.Contains("," + q.GoodsQuestionTypeId + ",")).Select(q => new { id = q.GoodsQuestionTypeId, text = q.TypeName });model.QuestionTypeData = JsonConvert.SerializeObject(listTypeData);}

后台:构建查询ajax数据

      public string GetQuestionSelect2Data(string term){string result = string.Empty;var list = goodsQuestionManageService.GetQuestionTypeList().Where(q => q.TypeName.Contains(term.Trim())).Select(q => new { id = q.GoodsQuestionTypeId, text = q.TypeName });result = "{\"results\":" + JsonConvert.SerializeObject(list) + "}";return result;}


这篇关于Select2下拉框的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/650255。

相关文章

C# ComboBox下拉框实现搜索方式

C# ComboBox下拉框实现搜索方式

《C#ComboBox下拉框实现搜索方式》文章介绍了如何在加载窗口时实现一个功能,并在ComboBox下拉框中添加键盘事件以实现搜索功能,由于数据不方便公开,作者表示理解并希望得到大家的指教... 目录C# ComboBox下拉框实现搜索步骤一步骤二步骤三总结C# ComboBox下拉框实现搜索步骤一这
阅读更多...
Android13_SystemUI下拉框新增音量控制条

Android13_SystemUI下拉框新增音量控制条

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 Android13_SystemUI下拉框新增音量控制条 一、必备知识二、源码分析对比1.brightness模块分析对比2.statusbar/phone 对应模块对比对比初始化类声明对比构造方法 三、源码修改四、相关资源 一、必备知识 在Android12 版本上面已经完成了功能的实现，目前是在And
阅读更多...
vs 设置combobox 下拉框高度

vs 设置combobox 下拉框高度

1.右击下拉框，点击属性，找到DropDownHeight，这就是设置下拉框高度的属性。 DropDownWidth就是宽度。
阅读更多...
dataTable导入combobox下拉框

dataTable导入combobox下拉框

this.JS_STEELTYPE.DataSource = dt;this.JS_STEELTYPE.DisplayMember = "该集合id（随便取）";this.JS_STEELTYPE.ValueMember = "字段名";
阅读更多...
select2实现异步获取下拉数据

select2实现异步获取下拉数据

我想用select2实现这种搜索异步获取下拉数据，怎么做？首先前端代码如下  $("#id").select2({ajax: {type: 'POST',url: "{{route('get_combination_main_goods')}}", //数据请求路径dataType: 'json',delay: 100,data: function (params) {return {key
阅读更多...
ElementPlus下拉框实现可选择，可输入

ElementPlus下拉框实现可选择，可输入

使用Elementplus的Autocomplete 组件 <el-col :span="12"><el-form-item label="身份证号" prop="cardId"><el-autocompletev-model="temp.cardId":fetch-suggestions="querySearchUser"placeholder="请输入身份证号码"clearable@cl
阅读更多...
select2的输入可下拉（modal框）--gxy

select2的输入可下拉（modal框）--gxy

html： <div class="form-group col-md-6 spanBox"><span>顾客名字</span><input type="text" name="usename" id="cunameValue" val="" style="display: none;"/><select id="cusName" data-placeholder="请输入顾客姓名" styl
阅读更多...
下拉框（可输入+自动匹配）--gxy

下拉框（可输入+自动匹配）--gxy

地址来源： https://www.cnblogs.com/brandonhulala/p/5990482.html 实现可输入+带自动匹配功能的下拉框，我试过以下几种方法： 1.直接使用h5的新标签，对应demo如下： <input list="browsers"><datalist id="browsers"><option value="Internet Explorer"><op
阅读更多...
FUNCTION_ALV 下拉框的实现

FUNCTION_ALV 下拉框的实现

下拉框可以用drdn_field或者使用DRDN_HNDL，这个文章主要是下拉框的基本使用，核心就是在fieldcat内表里面设置好下拉框的字段或者组的编号 文章目录 drdn_field使用DRDN_HNDL复制状态完整代码核心代码运行结果 drdn_field 使用DRDN_HNDL 复制状态 完整代码 *&--------------------
阅读更多...
Element-PLUS下拉框、日期组件、下拉菜单定位问题 element-plus下拉框组件定位问题 element-plus日期组件定位问题

Element-PLUS下拉框、日期组件、下拉菜单定位问题 element-plus下拉框组件定位问题 element-plus日期组件定位问题

Element-PLUS下拉框、日期组件定位问题 element-plus下拉框组件定位问题 element-plus日期组件定位问题 1、增加全局样式2、使用2.1、下拉框使用2.2、日期组件使用 1、增加全局样式 .el-popper.is-pure {inset: 36px auto auto 0px !important;} 2、使用 Element-PLUS
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2