Select2.js下拉框使用小结

一、Select2.js下拉框使用小结

用了这么久的Select2插件，也该写篇文章总结总结。当初感觉Select2不是特别好用，但又找不到比它更好的下拉框插件。

在我的印象里Select2有2个版本，最新版本有一些新的特性，并且更新了一下方法参数，比最初版本要好看一些，本文针对新版本。

官网：

由于博客系统的原因，所以只能演示简单的功能。

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

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

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

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表示最大输入限制。

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（新版）

//老版，注意如果初始化时文本框中本身没有值（为空），则不会触发该方法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"

如果大家还想深入学习，可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

二、JS实现select选中option触发事件操作示例

本文实例讲述了JS实现select选中option触发事件操作。分享给大家供大家参考，具体如下：

我们在用到下拉列表框select时，需要对选中的<option>选项触发事件，其实<option>本身没有触发事件方法，我们只有在select里的onchange方法里触发。

想添加一个option的触发事件,在option中添加onclick点来点去就是不会触发事件

又在select中添加onclick这下可好了,没选option呢就触发了

百度来的说option没有触发事件,需要在select中加onchange事件,虽然我曾经处理过类似的问题,用过就忘是不是猪脑子.

当我们触发select的双击事件时，用ondblclick方法。

当我们要取得select的选中事件时，用document.all['name'].value来获取，其中name是select的名称。

如果我们要得到select的全部的值就用一个for循环来实现。代码如下：

var vi= document.all['list'].length;for(var i=0;i<vi;i++){ document.form2.list(i).value;//form2是<form>的名称}

‍‍<select id="pid" onchange="gradeChange()"><option grade="1" value="a">选项一</a><option grade="2" value="b">选项二</a></select><script type="text/JavaScript"> function gradeChange(){ var objS= document.getElementById("pid"); var grade= objS.options[objS.selectedIndex].grade; alert(grade);}</script>

<select name="myselect" id="myselect"><option value="opt1">选项1</option><option value="opt2">选项2</option><option value="opt3">选项3</option></select>$("#myselect").change(function(){ var opt=$("#myselect").val();.});

Javascript获取select下拉框选中的值

现在有一id=test的下拉框，怎么拿到选中的那个值呢？

分别使用javascript原生的方法和jquery方法

<select id="test" name=""><option value="1">text1</option><option value="2">text2</option></select>

var myselect=document.getElementById("test");

var index=myselect.selectedIndex;// selectedIndex代表的是你所选中项的index

myselect.options[index].value;

二、jquery方法（前提是已经加载了jquery库）

var options=$("#test option:selected");

3.拿到选中项的文本alert(options.text());

三、js 怎么动态设置 option 的selected 选项

通过for循环判断每个选项，一旦满足条件则设置其selected属性为true即可，关键代码：

3、设置效果：如图设置选中项为2，点击按钮后“赵云”即被选中。

selected属性规定在页面加载时预先选定该选项。

被预选的选项会显示在下拉列表最前面的位置。

也可以在页面加载后通过 JavaScript设置 selected属性。