select2如何设置默认空值

最新推荐文章于 2024-07-30 11:44:31 发布

翱翔天地

最新推荐文章于 2024-07-30 11:44:31 发布

阅读量2.3w

点赞数 3

分类专栏： JQuery 文章标签： jQuery select2

本文链接：https://blog.csdn.net/you23hai45/article/details/75715100

版权

JQuery 专栏收录该内容

222 篇文章 2 订阅

订阅专栏

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(); 这样才有效