公司需要这样的一个实现效果，但是自己水平还还不是很高。只能修改别人的代码来实现我的效果。
jquery 版本jquery-1.10.2.min.js+
https://github.com/ivaynberg/select2这个是没修改过的github地址。
http://pan.baidu.com/s/1qW6qMo0这个是我分享的
css文件和图片自己找位置
<!DOCTYPE html>
<html >
<head>
<title>dzq</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/select2.css" target="_blank" rel="external nofollow" />
</head>
<body>
<input type="hidden" id="select" style="width:300px"/>
<script src="js/jquery.min.js"></script>
<script src="js/select2.js"></script>
<script>
$(document).ready(function(){
var data = [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}];
$('#select').select2({
multiple: true,
selectedCilck:function(data){
alert(data.id);
},
data:data
});
});
</script>
</body>
</html>
这个是实现下拉选中的效果
默认值有三个。
点击之后的效果
这个是原来的主要的功能
增加的功能有1：添加了点击按钮的事件
2：在搜索不到的情况下，输入英文的分号，自动把输入的内容变成按钮
项目中写的js参考
1：
function initReqList(){
$('.reqListSelect').select2({
multiple: true,
selectedCilck:function(da){
alert(da.id);
},
data:[] //这个地方是放下拉列表初始化的数据
});
}
这个js下拉菜单没有任何值，全是自己输入不是搜索来的。
2：
function initSelect(){
var projectLine = $("#projectLineId").find("option:selected").val();
var params = {
q: projectLine
};
$.ajax({
url: "${appRoot}/requirement/getSelectReqMap.do",
type :'post',
async:false,
dataType: 'json',
data: params,
success: function (d) {
$('.select').select2({
multiple: true,
selectedCilck:function(da){
alert(da.id);
},
data:d.option //这个是初始化的json
});
}
});
}
其实select2支持ajax参数的，但是开始没弄出来（好像是因为别的错误
）之后改了方案。
过了几天后找到了支持ajax的方法补上
$(function(){
$("#auditName").select2({
placeholder: "Search Users",
minimumInputLength: 2,
multiple:true,
ajax:{
url:"/user/select.do",
type:"post",
dataType:"json",
data:function(term,page){
return {
userName:term,
page_limit:10
};
},
results:function(data,page){
return {results:data};
}
}
});
});
<input type="hidden" id="auditName" name="auditName" style="width:300px"/>
3：
这个是查看页面的带有默认值的
function initSelect(){
var projectLine = $!project.projectLineId;
var projectId = $("#id").val();
var params = {
q: projectLine,
projectId:projectId
};
$.ajax({
url: "${appRoot}/requirement/getSelectAllReqMap.do",
type :'get',
async:false,
dataType: 'json',
data: params,
success: function (d) {
$('.select').select2({
multiple: true,
selectedCilck:function(da){
alert(da.id);
},
data:d.option
});
$('.select').select2('data', d.selected); //这个是默认值
$('.select').select2("readonly", true); //因为是查看页面所以设置为readonly
}
});
}
4：因为带有默认值所以我的json格式为
{selected:[{id:0,text:第一个}],option:[{id:0,text:第一个},{id:1,text:第二个}]}