<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" onchange="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>
相关推荐
本文将详细介绍Select2及其相关文件`select2.min.js`和`select2.min.css`,以及它们如何在项目中发挥重要作用。 Select2是一款强大的JavaScript库,它能够将普通的HTML `<select>`元素转变为功能丰富的选择器。通过...
**jQuery Select2组件详解** `jQuery Select2`是一款强大的、高度可定制的下拉选择框插件,它在原生HTML `<select>` 元素的基础上提供了丰富的功能和优秀的用户体验。这款组件广泛应用于网页开发中,使得传统的单选...
《基于Select2与jQuery-ZTree实现的树形下拉框详解》 在现代网页开发中,用户界面的设计和交互体验愈发重要。一个优秀的界面能够提升用户的操作效率,增强产品的吸引力。今天,我们将深入探讨如何利用Select2和...
**Select2插件详解** Select2是一款非常流行的JavaScript库,基于jQuery设计,它的主要目标是为HTML中的`<select>`元素提供一个强大的替代方案。在网页开发中,原生的`<select>`元素功能有限,样式单一,而Select2...
Bootstrap、Select2 和 ZTree 是三个在Web开发中常用的库,它们分别提供了不同的功能,而将它们整合在一起可以实现更复杂的交互式用户界面。这里我们将深入探讨这些库以及如何将它们结合来创建一个下拉框带树结构的...
接下来,通过jQuery代码调用Select2插件,对特定的select元素进行初始化。在这个过程中,我们设置了几个关键的配置选项。"placeholder"用于给select元素提供一个默认的提示信息,"tags"允许用户输入自定义的选项,...
《Select2:打造高效下拉菜单的神器》 在网页开发中,下拉菜单是不可或缺的元素之一,尤其是在实现多级联动效果时。而Select2则被誉为“最好用的下拉插件”,它以其强大的功能和简洁的API,赢得了开发者们的广泛...
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"> ``` ...
**下拉框与下拉控件:Select2详解** 在网页设计中,下拉框(Dropdown)是一种常见的用户界面元素,用于提供多个选项供用户选择。然而,原生的HTML `<select>` 标签功能相对有限,样式单一,无法满足现代网页设计的...
在这个压缩包中,我们有`select2.min.css`(样式文件)和`select2.min.js`(JavaScript 文件)。将这两个文件放入你的项目目录,并在HTML文件中引用它们。例如,在`<head>` 标签内添加: ```html <link href="...
**jQuery Select2插件详解** Select2是一款基于jQuery的增强型下拉选择框插件,它极大地改进了原生HTML `<select>` 元素的用户体验和功能。标题中的"select2(jquery)插件下载"指的是这个插件的获取途径,通常通过...
`Select2`是一个流行的jQuery插件,它提供了丰富的功能和自定义选项,使得创建优雅的下拉选择框变得更加简单。本教程将详细讲解如何利用`Select2`实现全国省市区的三级联动下拉菜单。 首先,我们需要理解`Select2`...
在"bootstrapvalidator表单验证 + select2 拼音模糊匹配 demo"这个项目中,开发者旨在结合BootstrapValidator与select2插件,实现一个具有高可用性和用户体验的前端表单。 BootstrapValidator提供了多种内置验证...
《关于Select2在IE8及更高版本中的兼容性与应用》 在Web开发过程中,兼容性问题始终是一个棘手的问题,尤其是对于那些老旧但仍然被广泛使用的浏览器,如Internet Explorer 8 (IE8)。Select2,作为一个强大的下拉框...
标题"select2+jquery"指出,这个压缩包的内容是关于一个名为Select2的组件,以及它与jQuery库的结合使用。Select2是一个强大的选择器插件,它可以增强HTML的选择框功能,提供更丰富的用户体验。而jQuery是一个广泛...
**Select2 概述** Select2 是一个强大的 jQuery 插件,它旨在改善原生 HTML `<select>` 元素的用户体验。这个插件不仅提供了美观的界面,还具备丰富的功能,如多选、搜索过滤、远程数据加载以及列表分组等。通过 ...
在这个例子中,`#mySelect`是下拉框的ID,`select2.min.js`和`select2.min.css`分别是Select2的JavaScript和CSS文件。 总结来说,"下拉框带模糊查询引入select2组件.zip"是一个包含Select2库和使用示例的压缩包,...
select2资源包。里面包含select2相关的js、css,解压后在dist目录下可找到。使用select2需要搭配jquery1.8以上版本。在这资源包的vendor文件夹下有jquery2.1的版本
在某些场景下,我们可能需要在Select2的选择列表中实现中文选项的快速定位,例如通过输入拼音或首字母来筛选和查找选项。虽然Select2本身并不直接支持这样的功能,但我们可以利用一些技巧来实现这一需求。 首先,...
Select2与Angular结合,可以方便地在Angular项目中使用Select2的功能,提供数据绑定、指令集成等特性,使得在Angular环境中使用Select2更加顺畅。 **深入讲解Select2与Angular的集成** 在Angular项目中集成Select2...