<link href="${base }/select2/select2.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="${base }/select2/jquery-1.7.2.js"></script>
<script language="JavaScript" src="${base }/select2/select2.min.js"></script>
----------js-----------
$(document).ready(function() {
$("#userId").select2({
placeholder: "SELECT A MEMBER",
width:"200px",
allowClear:true,
query:searchUser,
dropdownAutoWidth:true,
dropdownCssClass:'dropdown',
formatResult: formatUser,
formatSelection: formatSelectionUser
});
$("#userId").on("change",
function (e) {
var user = getSelect2("userId");
});
});
function getSelect2(id){
return $("#"+id).select2("data");
}
function formatUser(state) {
var result = "<table class='getUser' style='width: 200px' ><tr><td>"+state.text+"</td></tr></table>";
return result;
}
function formatSelectionUser(state) {
return state.text;
}
function searchUser(query) {
var queueId = "";//$("#queues").val();
var queue = getSelect2("queueId");
if(queue != null && queue != ""){
queueId = queue.id;
}
var teamId = $("#team").val();
$.ajax({
url: base + "/ajax/getUsersByName",
async: true,
type : "get",
dataType : "json",
data: {"time": new Date().getTime(),"userName":query.term,"queueId":queueId,"teamId":teamId},
success: function(data){
query.callback({results: data});
}
});
}
------------html---------------------
<input id="userId" name="userId" />
-------------------java-------------------
@RequestMapping(value="/getQueuesByName",method=RequestMethod.GET)
@ResponseBody
public JSONArray getQueuesByName(String queueName){
JSONArray result = new JSONArray();
try {
Map<String,Object> map = new HashMap<String,Object>();
map.put("queueName", queueName);
List<Queue> list = utilService.getQueuesByName(map);
JSONObject object = null;
if(list != null && list.size() > 0)
for(int i=0;i<list.size();i++){
object = new JSONObject();
object.put("id",list.get(i).getId());
object.put("text", list.get(i).getName());
result.add(object);
}
}catch (Exception e) {
e.printStackTrace();
logger.error(e.getMessage());
}
return result;
}
===================================select2 方式2============================
$(document).ready(function() {$("#teams").select2({
width:"200px",
allowClear:true,
formatResult: function(state){
return state.text;
}
});
}
<select id="teams" οnchange="refreshUsers('team',this.value);" name="teamId" >
<option value="">--SELECT--</option>
<c:forEach items="${listLv}" var="codeInt">
<option value="${codeInt.codeId }">${codeInt.codeDesc }</option>
</c:forEach>
</select>