js智能下拉插件select2使用教程

js智能下拉插件select2使用教程

下面介绍select2.js的方法,已经整理好文件,可以直接下载使用:实现效果如下:引用文件:select2.min.css jquery.js select2.full.min.jshtml代码:本地数据方式AJAX获取数据方式本地数据方式:html的select中的opt...

位置:首页 > 动态 > 技术文档 > js智能下拉插件select2使用教程

js智能下拉插件select2使用教程

下面介绍select2.js的方法,已经整理好文件,可以直接下载使用:

实现效果如下:

引用文件:select2.min.css jquery.js select2.full.min.js

html代码:


<h3>本地数据方式</h3>

<select class="form-control input-sm downList1">

<option></option>

</select>

<h3>AJAX获取数据方式</h3>

<select class="form-control input-sm downList2">

<option></option>

</select>

本地数据方式:

html的select中的option是可选的,如果不写一个空的option标签,则默认选择第一项;如果写了option标签,则默认为空,但调用的时候,最好设置placeholder属性,为了美观;AJAX获取数据方式:

html的select中的option是必选的

javascript代码:


<script type="text/javascript">

//one 本地数据方式

var dataList = [

{ id: 0, text: 'ljiong.com(老?宀┛?' },

{ id: 1, text: 'Ants(蚂蚁)' },

{ id: 2, text: 'can you speak javascript(你能讲JavaScript嘛)' },

{ id: 3, text: 'vae(许嵩)' },

{ id: 4, text: 'Badminton(羽毛球)' }

];

$(".downList1").select2({

data: dataList,

placeholder:'请选择',//默认文字提示

language: "zh-CN",//汉化

allowClear: true//允许清空

})

//two AJAX获取数据方式

$(".downList2").select2({

ajax: {

type:'GET',

url: "url",

dataType: 'json',

delay: 250,

data: function (params) {

return {

q: params.term, // search term 请求参数

page: params.page

};

},

processResults: function (data, params) {

params.page = params.page || 1;

/*var itemList = [];//当数据对象不是{id:0,text:'ANTS'}这种形式的时候,可以使用类似此方法创建新的数组对象

var arr = data.result.list

for(item in arr){

itemList.push({id: item, text: arr[item]})

}*/

return {

results: data.items,//itemList

pagination: {

more: (params.page * 30) < data.total_count

}

};

},

cache: true

},

placeholder:'请选择',//默认文字提示

language: "zh-CN",

tags: true,//允许手动添加

allowClear: true,//允许清空

escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入

minimumInputLength: 1,//最少输入多少个字符后开始查询

formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果

formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择

});

</script>

获取选中的值


获取id: $(".downList2").select2("data")[0].id;

获取text: $(".downList2").select2("data")[0].text;

也可使用以下方式取值:

$(".downList2").val();

$(".downList2").select2('val');

效果图如下:

<img src="https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/20161227114610793.jpg?x-oss-process=image/watermark,image_aW1wb3J0LmpwZw==,g_se,x_1,y_1" alt="js智能下拉插件select2使用教程-select下拉框多选插件">

js部分

(function(window, document) {

  'use strict';

  varjsonp =function(url, data, callback) {

    //1、挂载回调函数

    varfnsuffix = Math.random().toString().replace('.','');

    varcbFuncName ='my_json_cb'+ fnsuffix;

    window[cbFuncName] = callback;

    //2、将data转换成url字符串的形式

    //{id=1,count=4}==>id=1&count=4

    varquerystring = url.indexOf('?') == -1 ?'?':'&';  //判断url中最后是否有?,没有则为?

    for(varkeyindata) {

      querystring += key +'='+ data[key] +'&';

    }

    //3、处理url中回调函数 url+=callback=sdgade

    querystring +='callback='+ cbFuncName;

    //querystring=?id=1&count=4&callback=sdgade

    //4、创建一个script标签

    varscriptElement = document.createElement('script');

    scriptElement.src = url + querystring;

    //5、把script标签放到页面上

    document.body.appendChild(scriptElement);

  };

  window.$jsonp = jsonp;

})(window, document)

在页面中测试

<!DOCTYPE html>

<html>

<head>

  <title>jsonp</title>

</head>

<body>

  <div id="htt"></div>

  <script type="text/javascript"src="http.js"></script>

  <script>

    (function(){

      $jsonp('http://api.douban.com/v2/movie/in_theaters',{}, 

        function(data){

          document.getElementById('htt').innerHTML=JSON.stringify(data);

        });

    })()

  </script>

</body>

</html>

结果可以返回结果,页面显示为,表示获取成功!


关键词:

上一篇: 什么是网站开发?

下一篇: 提高网站性能之 如何对待JavaScript_javascript技巧

版权所有www.Zding.cn © 2017 贵州钟鼎网络科技有限责任公司 版权所有. 黔ICP备11002213号
贵阳遵义黔西南0851-82216110
观望只会错过创造美好的机会
线上服务咨询 0851-82216110 填写需求索取报价