1、问题背景

select2搜索下拉框，当满足某种条件时，让它默认选中空值

2、问题原因

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select2默认选择空值</title>
<link rel="stylesheet" href="../css/select2.css" />
<script src="../js/jquery-3.2.1.js"></script>
<script src="../js/select2.js"></script>
<script>
	$(function(){
		$("#selectNull").select2();

		$("#selectNull").on("select2:select",function(){
			var data = $(this).val();
			if(data=="3")
			{
				$("#selectNull").val("");
			}
		});
	});
</script>
</head>
<body>
   <div>
   		<select id="selectNull" class="js-example-basic-single" style="width:400px;">
   			<option value=""></option>
   			<option value="1">AA</option>
   			<option value="2">BB</option>
   			<option value="3">CC</option>
   			<option value="4">DD</option>
   			<option value="5">EE</option>
   			<option value="6">FF</option>
   		</select>
   </div>
</body>
</html>

如果直接利用$("#selectNull").val(""); 发现效果不佳；

或者利用$("#selectNull").select2.select2.("val","");也不行

3、解决办法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select2默认选择空值</title>
<link rel="stylesheet" href="../css/select2.css" />
<script src="../js/jquery-3.2.1.js"></script>
<script src="../js/select2.js"></script>
<script>
	$(function(){
		$("#selectNull").select2();

		$("#selectNull").on("select2:select",function(){
			var data = $(this).val();
			if(data=="3")
			{
				$("#selectNull").val("").select2();
			}
		});
	});
</script>
</head>
<body>
   <div>
   		<select id="selectNull" class="js-example-basic-single" style="width:400px;">
   			<option value=""></option>
   			<option value="1">AA</option>
   			<option value="2">BB</option>
   			<option value="3">CC</option>
   			<option value="4">DD</option>
   			<option value="5">EE</option>
   			<option value="6">FF</option>
   		</select>
   </div>
</body>
</html>

使用$("#selectNull").val("").select2(); 这样才有效

select2如何设置默认空值的更多相关文章

  1. select2 取值 遍历 设置默认值

    select2 取值 遍历 设置默认值 本章内容主要介绍Select2 的初始化,获取选中值,设置默认值,三个方法.Select2 美化了单选框,复选框和下拉框,特别是下拉框多选的问题.但同时,Sel ...

  2. select2 插件编辑时设置默认值

    function htDate(selectCustomerId, val) { var customerId = selectCustomerId; var values = val; ajaxJs ...

  3. datepickerx设置默认日期

    datepicher插件是jQuery UI的一个插件,它提供一个日期弹出窗口(或直接显示在页面),供用户选择日期.在Web开发中,总会遇到需要用户输入日期的情况.一般都是提供一个text类型的inp ...

  4. .NET DateTime类型变量作为参数时设置默认值

    一个小的 Tips. .NET 中函数参数的默认值需要是编译时常量.如果参数是引用类型,可以设置Null,如果是值类型,可以设置相应的编译时常量,如整型可以用整数,但对于DateTime(结构体,值类 ...

  5. ng-option指令使用记录，设置默认值需要注意

    ng-options一般有以下用法: 数组作为数据源: label for value in array select as label for value in array label group ...

  6. IIS设置默认主页无效

    服务器系统:Windows server 2008 R2 IIS版本:7.5 IIS中部署一个dotnet framework 3.5的网站应用程序,设置"默认文档"为:index ...

  7. 《Entity Framework 6 Recipes》中文翻译系列 (14) -----第三章 查询之查询中设置默认值和存储过程返回多结果集

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 3-6在查询中设置默认值 问题 你有这样一个用例,当查询返回null值时,给相应属性 ...

  8. EF Core1.0 CodeFirst为Modell设置默认值!

    当我们使用CodeFirst时,有时候需要设置默认值! 如下 ; public string AdminName {get; set;} = "admin"; public boo ...

  9. cefsharp设置默认语言

    cefsharp是不错的浏览器内核封装版本之一,默认语言是en-US,这个一直困扰着项目,项目好多处需修改,后来经多次尝试,才发现,原来设置默认语言这么简单. CefSharp.Settings se ...

随机推荐

  1. spring boot开发为什么使用jar包

    spring boot既可以打成war发布,也可以找成jar包发布. jar包:直接通过内置tomcat运行,不需要额外安装tomcat.如需修改内置tomcat的配置,只需要在spring boot ...

  2. C++求矩阵的鞍点

    矩阵的鞍点就是指它在本行中的值最大,在本列中的值最小. 求解思路: 求出每行的最大值MaxRow以及每列的最小值MinColumn 保存行最大值的位置和列最小值的位置 如果行最大值得位置和列最小值的相 ...

  3. heartbeat-gui

    一.简介gui heartbeat的v2版本将v1中haresources配置文件使用GUI图形配置接口来配置高可用集群.更加便捷,直观. 二.准备条件和资源规划见上文http://www.cnblo ...

  4. Gym100783C Golf Bot（FFT）

    https://vjudge.net/problem/Gym-100783C 题意: 给出n个数,然后有m次查询,每次输入一个数x,问x能否由n个数中2个及2个以下的数相加组成. 思路:题意很简单,但 ...

  5. asp.net core开发注意事项

    1.类库的创建尽量选择.net standard. 如果选择.net core 则.net framework不能调用该类库, .net core和.net framework都可以调用.net st ...

  6. ionic serve 第一次可以访问，刷新报错解决方法

    想学习一下,在ionic start 新项目后, ionic serve 第一次可以访问是可以的, 可是刷新一下后就报错了,端口也没给占用, 网上找了半天也没找到问题所在, 最后研究了下: npm i ...

  7. Python在线教程（廖雪峰）

    http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000

  8. ACM ICPC 2010–2011, Northeastern European Regional Contest St Petersburg – Barnaul – Tashkent – Tbilisi, November 24, 2010

    ACM ICPC 2010–2011, Northeastern European Regional Contest St Petersburg – Barnaul – Tashkent – Tbil ...

  9. 又是新动作！微信小程序专属二维码出炉

    又到了晚上,微信又给我们带来了惊喜,并这次不是新的能力,而是把大家再熟悉不过的二维码换了新的造型. 正式揭晓:微信特制的小程序码.扫一扫新二维码 只要你的微信升级到了 6.5.7 版本,就可以扫码或者 ...

  10. HDU 3397 线段树区间修改

    Sequence operation Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...