公司需要這樣的一個實現效果，但是自己水平還還不是很高。只能修改別人的代碼來實現我的效果。
jquery 版本jquery-1.10.2.min.js+
https://github.com/ivaynberg/select2這個是沒修改過的github地址。
http://pan.baidu.com/s/1qW6qMo0這個是我分享的
css文件和圖片自己找位置
<!DOCTYPE html>
<html lang="en">
<head>
<title>dzq</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/select2.css" />
</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:[] //這個地方是放下拉列表初始化的數據
});
}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};
}
}
});
});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
}
});
}{selected:[{id:0,text:第一個}],option:[{id:0,text:第一個},{id:1,text:第二個}]}