zoukankan      html  css  js  c++  java
  • select2如何设置默认空值

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


  • 相关阅读:
    DM6437 dsp系列之启动过程全析(2)—AIS文件解析
    DreamWeaver文件保存时,提示"发生共享违例"问题的解决方法
    再谈cacheAsBitmap
    as3 updateAfterEvent的作用
    导致flash屏幕重绘的几种方式及避免重绘的方法
    盒子模型&position定位
    [工作问题总结]MyEclipse 打开项目
    三周的苦逼学习,这点文字只为沧海之一粟
    偷个空,写个博客——各种沟通各种纠结
    Arbitrage HDU
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13313844.html
Copyright © 2011-2022 走看看