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. 20145307第二次JAVA学习实验报告

    20145307<Java程序设计>实验报告二:Java面向对象程序设计 实验要求 1.初步掌握单元测试和TDD 2.理解并掌握面向对象三要素:封装.继承.多态 3.初步掌握UML建模 4 ...

  2. LeetCode (226):Invert Binary Tree 递归实现

    Invert a binary tree. 4 / \ 2 7 / \ / \ 1 3 6 9 to 4 / \ 7 2 / \ / \ 9 6 3 1 Trivia:This problem was ...

  3. Spring Cloud OAuth2（二） 扩展登陆方式：账户密码登陆、 手机验证码登陆、 二维码扫码登陆

    概要 基于上文讲解的spring cloud 授权服务的搭建,本文扩展了spring security 的登陆方式,增加手机验证码登陆.二维码登陆. 主要实现方式为使用自定义filter. Authe ...

  4. C# 往string [] arr 数组插入元素

    string [] arr ; List<string> _list = new List<string>(arr ); for(int i ;i<10;i++) { _ ...

  5. PAT L3-012 水果忍者

    占个坑,等自己数学好一点以后再来重新把这个题写一遍 附上链接 附上大牛代码: #include <stdio.h> #include <algorithm> #define I ...

  6. 每天一点存储知识：集群Nas

    什么是集群Nas 集群是由多个节点构成的一种松散耦合的计算节点集合,协同起来对外提供服务.集群主要分为高性能集群HPC,高可用集群HAC和负载均衡集群LBC.集群Nas是指协同多个节点(通常称为Nas ...

  7. java自带的MD5

    前言:        MD5可生成16.32.64位数的签名. // MD5加码,32位 public static String toMD5(String plainText) { String r ...

  8. ubuntu mac terminal install software

    http-server // ubuntu sudo npm install http-server -g npm node.js yarn

  9. 高质量的C++博客

    陈硕  :http://blog.csdn.net/Solstice 孟岩: http://blog.csdn.net/myan

  10. mysql数据库优化课程---13、mysql基础操作

    mysql数据库优化课程---13.mysql基础操作 一.总结 一句话总结:mysql复制表,索引,视图 1.mysql如何复制表? like select * 1.复制表结构 create tab ...