select2 demo

最新推荐文章于 2024-07-30 22:36:34 发布

weixin_33922672

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量347

点赞数

文章标签： javascript python java ViewUI

原文链接：https://my.oschina.net/u/3238650/blog/907767

版权

2019独角兽企业重金招聘Python工程师标准>>>

直接上代码

<!-- <%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
	String basePath = request.getScheme()+"://"+ request.getServerName() + ":" + request.getServerPort() + request.getContextPath();
%>-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link
	href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css"
	rel="stylesheet" />
<script type="text/javascript" src="./jquery-3.0.0.js"></script>
<script src="./dist/js/select2.js"></script>
<script type="text/javascript" src="./dist/js/i18n/zh-CN.js"></script>
<script type="text/javascript">
//var basePath="<%=basePath%>";
var basePath="123";
</script>
</head>
<body>
	<select id="demo1" style="width: 200px;"></select>
	<button onclick="setValue();">setValueId</button>
	<button onclick="clearValue()">clear</button>
	<br><br>
	<select id="demo2" style="width: 200px;">
		<option selected="selected">liyuhang</option>
	</select>
	<br><br>
	<select id="demo3" data-tags="true" data-placeholder="Select an option" data-allow-clear="true" style="width:200px;">
		  <optgroup label="Group Name">
  		  <optgroup label="wuhaha">
    <option>Nested option</option>
    <option selected="selected">liyuhang</option>
    </optgroup>
  </optgroup>
	</select>
	<script type="text/javascript">
		var data = [ {
			id : 0,
			text : 'enhancement'
		}, {
			id : 1,
			text : 'bug',
			disabled : 'disabled'
		}, {
			id : 2,
			text : 'duplicate',
			selected:"selected"
		}, {
			id : 3,
			text : 'invalid'
		}, {
			id : 4,
			text : 'wontfix'
		} ,{
			id:5,
			text:"李宇航",
			"children":[{
				id:6,
				text:"少年"
			}],
			"elment": HTMLOptGroupElement
		}];
		var $demo1=$("#demo1").select2({
			data : data,
			//minimumResultsForSearch : Infinity,
			//multiple:'multiple',//是否多选
			placeholder : "Select an option",
			// templateSelection: template,
			//closeOnSelect: true,
			//selectOnClose: true,
			//maximumSelectionLength: 1,//最多选项
			allowClear: true//允许用户清空
		});

		$("#demo2").select2({
			ajax : {
				url : "http://www.baidu.com",
				dataType : 'json',
				delay : 250,
				data : function(params) {
					return {
						name : params.term					
					};
				},
				processResults : function(data, params) {
					return {
						results : data,
					};
				},
				cache : true
			},
			escapeMarkup : function(markup) {
				return markup;
			},
			minimumInputLength : 1,//最小输入查询
			language: "zh-CN"//使用中文		
		});
		
		var $eventSelect = $("#demo1");
//绑定select事件
		$eventSelect.on("select2:select", function (e) {
			var node=$("#demo1").select2("data");
			node.id;
			node.text;
			alert(node.text);
		});
		//赋值
		function setValue(){
			$demo1.val('4').trigger("change");
		}
		
              //清空值
		function clearValue(){
			$demo1.val(null).trigger("change");
		}
		
		$("#demo3").select2();
		
	</script>
</body>
</html>

ps1:select2 和JQuery有版本兼容问题，所以一般使用select2需引入相应的JQuery。

ps2:汉化需要引入zh-CN.js。

demo1是从数组加载数据。

demo2是通过ajax向服务器加载数据

data : function(params) {
					return {
						name:params.term					
					};
				}

params.term会获取到搜索输入框的值，以name为key发送至服务器

				processResults : function(data, params) {
					return {
						results : data,
					};
				}

processResults是ajax从服务器加载数据后的回调函数，服务器返回json数组。

	<select id="demo2" style="width: 200px;">
		<option selected="selected">liyuhang</option>
	</select>

<option selected="selected">liyuhang</option>是个select2赋一个初始值，同步请求会用到

demo3是通过html初始化select2

转载于:https://my.oschina.net/u/3238650/blog/907767

weixin_33922672

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
select2 demo

2019独角兽企业重金招聘Python工程师标准>>> ...
复制链接

扫一扫