<link rel="stylesheet" href="node_modules/_bootstrap@3.3.7@bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="node_modules/_select2@4.0.6-rc.0@select2/dist/css/select2.css">
<script src="node_modules/_jquery@3.2.1@jquery/dist/jquery.js"></script>
<script src="node_modules/_select2@4.0.6-rc.0@select2/dist/js/select2.js"></script>
<script src="node_modules/_bootstrap@3.3.7@bootstrap/dist/js/bootstrap.js"></script>
首先引用select2的css和js,select2与bootstrap的使用并不冲突。
HTML
<select name="" id="c1">
<option value=""> </option>
<optgroup label="girl">
<option value="vv">1hsdjkdsf</option>
<option value="cc">hkjhsd</option>
<option value="aa">jksdf</option>
<option value="bb">afasfd</option>
</optgroup>
<optgroup label="boy">
<option value="5">1hsdjkdsf</option>
<option value="6">hkjhsd</option>
<option value="7">jksdf</option>
</optgroup>
</select>
<input type="button" name="" id="abc">
组别名称为optgroup。
js
$("#c1").select2({
width:"200px",
multiple:true,
templateResult:function formatState(state){
console.log(state.id);
if(!state.id){
return state.text;
}
var state1=$(`<img src="images/${state.id}.png" width="40"><span>${state.text}"111"</span>`);
return state1;
}
})
每一个选项都有一个单独的id,multiple属性可以设置为多选。templateResult循环数据,在每个选项前拼接图片地址。
打印出来选中的值为之前html中设置的option的value值。
----------------------------------------------------------------------------------------------------------------------------
使用ajax获取
$.ajax({
type:"get",
url:"data.json",
dataType:"json",
success:function(res){
console.log (res.results);
$("#c1").select2({
data:res.results,
width:"200px",
multiple:true
})
}
})
在success方法中进行select2插件初始化
data为ajax循环出来的数据
但是此时打印选中的选项出来的结果为 当前option的数组索引,无法打印出value。