select2 demo

時間 2019-12-01

標籤 select2 select demo 简体版

原文原文鏈接

直接上代碼

<!-- <%@ 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是從數組加載數據。javascript

demo2是經過ajax向服務器加載數據

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

params.term會獲取到搜索輸入框的值，以name爲key發送至服務器css

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

processResults是ajax從服務器加載數據後的回調函數，服務器返回json數組。html

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

<option selected="selected">liyuhang</option>是個select2賦一個初始值，同步請求會用到java

demo3是經過html初始化select2node

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。