首页 > 代码库 > select2插件使用小记
select2插件使用小记
页面引入:
// 页面顶部 <link rel="stylesheet" type="text/css" href="css/select2.min.css"> // 页面底部 // 依赖jQuery,引入jQuery之后,还需引入以下js文件 <script type="text/javascript" src="js/select2/select2.full.min.js"></script> <script type="text/javascript" src="js/select2/lang/zh-CN.js"></script>
调用select2
var util = { //模糊匹配 select2: function(options){ select2(options); //将输入的值作为其值 var inputAsValue = http://www.mamicode.com/function($target, value){ var id = "select2-" + $target.attr("id") + "-container"; $("#advertiser_name_input").val(value).keyup(); $("#"+id).text(value); }; function select2(arg) { var requireName = arg.requireName; arg.target.select2({ placeholder:arg.placeholder, // 文本框的提示信息 language: ‘zh-CN‘,
minimumInputLength: 2, // 至少输入n个字符,才去加载数据
maximumInputLength: 100, // 限制最大字符,以防坑
data: options.data, ajax: { url: arg.url, dataType: ‘json‘, method: ‘post‘, quietMillis:100, delay: 250, data: function (params) { var data =http://www.mamicode.com/ {}, id; data[arg.requireName] = params.term; // 查询的关键字 // data[‘page‘] = params.page; return $.extend(true, data, arg[‘other‘]); }, processResults: function (result, params) { // params.page = params.page || 1; if(result && result.flag && !$.isEmptyObject(result.data)){ var resultData =http://www.mamicode.com/ result.data, selectData = [], selectObj = {}; for(var i=0,len=resultData.length; i<len; i++){ selectObj = { ‘id‘: resultData[i][‘id‘] || ‘‘, ‘text‘: resultData[i][‘name‘] || ‘‘, ‘industry_id‘: resultData[i][‘industry_id‘] || ‘‘ }; selectData.push(selectObj); } return { /* pagination: { more: (params.page * 30) < 100 //data.total_count },*/ results: selectData }; }else{ var noData =http://www.mamicode.com/ [ {id:0,text:‘暂无数据‘} ]; return { results:noData }; } }, cache: true }, escapeMarkup: function (markup) { return markup; }, minimumInputLength: 1 }); arg.target.on("change", function(e){ options.change && options.change(); }); } } }; // 调用 pageFun.select2({ target: $(‘#select‘), url: pageInfo.activityNameUrl, requireName: ‘key‘, callback: ‘‘, data: {‘id‘, 11}, change: function(){ var $select = $(‘#select‘); var data = http://www.mamicode.com/$select.select2("data")[0]; // 其余操作 } });
注意:注释的代码可以实现第一次只显示30(若总条数>30),鼠标拖动滚动条往下滚时,再去请求再显示30条的效果;但是会重复显示之前的30条数据。
设置默认值或回填值:
if(selectId !=‘‘){ $("#select").html(‘<option value="http://www.mamicode.com/‘+selectId +‘">‘+selectVal+‘</option>‘).trigger(‘change‘); }
显示全部:
名称:<select class="select-w100 select2" name="select" id="select"> <option value="">全部</option> </select>
select2插件使用小记
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。