select2常规操作~初始化、设置默认值、加载、多选、获取数据、清空、动态添加option.... |
您所在的位置：网站首页 › 怎么设置select的默认值 › select2常规操作~初始化、设置默认值、加载、多选、获取数据、清空、动态添加option.... |
select2常规操作~初始化、设置默认值、加载、多选、获取数据、清空、动态添加option....
|
前置条件使用select
1、引用相关文件
2、给select设置id
3、调用select2
$(document).ready(function() {
$("#xiaozheng").select2();
});
使用select2
$("#xiaozheng").select2();
数据初始化
1、静态数据初始化 标签的值的id，value的值为text var data=[ { "id": 0, "text": "enhancement" }, { "id": 1, "text": "bug" }, { "id": 2, "text": "duplicate" }, { "id": 3, "text": "invalid" }, { "id": 4, "text": "wontfix" } ]; $("#xiaozheng").select2({ data:[{id:0,text:'enhancement'},{id:1,text:'bug'},{id:2,text:'duplicate'},{id:3,text:'invalid'},{id:4,text:'wontfix'}] });
2、远程初始化数据 ~ 利用ajax拿到id,text的数组对象，然后赋值操作 // 这个loadMerchant接口返回的数据格式就是{id: '', text: ''}数组对象 var merchantNameData = [{id: '', text: ''}]; $("#userNameUnit").select2({ ajax: { url: "crossBorder_loadMerchant.action", type: "post", dataType: "json", delay: 250, async: false, data: function (params) { return { criteria: params.term }; }, processResults: function (data, page) { merchantNameData = data; return { results: merchantNameData }; }, cache: false }, });3、直接渲染数据 // Map standardCurrencyMap = new LinkedHashMap(); // setAttribute("standardCurrencyInfo", standardCurrencyMap); 设置默认1、渲染选中，默认选中key = 840的项 2、jq选中，在点击编辑时，回显默认值 $('#form-feeCurrency').val(d.feeCurrency).select2();第二种方式： $('#form-feeCurrency').val([d.feeCurrency]).trigger('change');第二种方式会触发change事件 3、去除选中值 $('#mySelect2').val(null).trigger('change'); $('#mySelect2').val("").trigger('change'); 设置多选增加multiple="multiple"属性配置 获取数据1、如果是单选： // 跟JQ获取表格数据方式一样 var feeCurrency = $("#form-feeCurrency").val();2、如果是多选的话，有两种方式获取数据 注意：如果用单选的方式获取数据，则得到的是NULL 2.1 增加改变事件，将变化的数据添加到隐藏域中，用“；”分割开 1、设置隐藏域 2、改变事件触发 $('#curType').change(function(){ let o=document.getElementById('curType').getElementsByTagName('option'); let all=""; for(var i=0;i |
【本文地址】
今日新闻 |
推荐新闻 |