zoukankan      html  css  js  c++  java
  • 下拉框、下拉控件Select2的使用

     直接新建html文档即可用

    <!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>select2</title>
    	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
      </head>
      <body>
    	<select id="select2_id" multiple="multiple"> 
    		<option value="kakaxi">卡卡西</option>
    		<option value="mingren">鸣人</option>
    		<option value="zuozhu">佐助</option>
    		<option value="xiaoying">小樱</option>
    		<option value="bofengshuimen">波风水门</option>
    		<option value="dashewan">大蛇丸</option>
    		<option value="gangshou">纲手</option>
    		<option value="zilaiye">自来也</option>
    	</select>
    	<button id="getBtn">获取选中值</button>
    	<button id="destoryBtn">移除下拉框</button>
    	<button id="initBtn">加载下拉框</button>
    	<button id="addBtn">添加值</button>
    	<button id="emptyBtn">清空下拉框</button>
    	<button id="setBtn1">单赋值</button>
    	<button id="setBtn2">多赋值</button>
    	<button id="setBtn3">选中所有</button>
    <script type="text/javascript">
    $(function(){
    	initSelect2();
    	
    	$("#getBtn").on('click', function(){
    		alert($("#select2_id").val());
    	});
    	$("#addBtn").on('click', function(){
    		$("#select2_id").append($("<option>", {value: 'value1', text: 'text1'}));
    	});
    	$("#destoryBtn").on('click', function(){
    		$("#select2_id").select2("destroy");
    	});
    	$("#emptyBtn").on('click', function(){
    		$("#select2_id").empty();
    	});
    	$("#initBtn").on('click', function(){
    		initSelect2();
    	});
    	$("#setBtn1").on('click', function(){
    		// 赋值 - 单选
    		$("#select2_id").val('xiaoying').trigger("change");
    	});
    	$("#setBtn2").on('click', function(){
    		// 赋值 - 多选
    		$("#select2_id").val(['kakaxi','gangshou']).trigger("change");
    	});
    	$("#setBtn3").on('click', function(){
    		$("#select2_id")
    		.val($("#select2_id option")
    				.map(function(){
    				return $(this).val();
    				}).get()
    		).trigger("change");
    	});
    	
    });
    
    function initSelect2() {
    	$('#select2_id').select2({
    		//placeholder: "请选择",
    		placeholder: {id: '', text: "请选择"}, // 同上,这里默认空值为 ''
    		tags:true,
    		createTag:function (decorated, params) {
    			return null;
    		},
    		'400px',
    		closeOnSelect: true,
    		allowClear: true,
    		language: "zh-CN"
    		//tokenSeparators: [',', ' ']
    	});
    }
    </script>
    </body>
    </html>

    select2事件

    $('select[name="level1"]').on("change",function(e){ console.log("我改变了")});
    $('select[name="level1"]').on("select2:open",function(e){ console.log("我打开了")});
    $('select[name="level1"]').on("select2:close",function(e){ console.log("我关闭了")});
    $('select[name="level1"]').on("select2:select",function(e){ console.log("我选中了")});
    $('select[name="level1"]').on("select2:unselect",function(e){ console.log("我取消了")});
  • 相关阅读:
    实例属性 类属性 实例域 类域
    研究数据集
    static 静态域 类域 静态方法 工厂方法 he use of the static keyword to create fields and methods that belong to the class, rather than to an instance of the class 非访问修饰符
    accessor mothod mutator mothod 更改器方法 访问器方法 类的方法可以访问类的任何一个对象的私有域!
    上钻 下钻 切片 转轴 降采样
    识别会话
    Performance Tuning Using Linux Process Management Commands
    Secure Hash Algorithm 3
    grouped differently across partitions
    spark 划分stage Wide vs Narrow Dependencies 窄依赖 宽依赖 解析 作业 job stage 阶段 RDD有向无环图拆分 任务 Task 网络传输和计算开销 任务集 taskset
  • 原文地址:https://www.cnblogs.com/dulinan/p/12033035.html
Copyright © 2011-2022 走看看