zoukankan      html  css  js  c++  java
  • select2切换事件如何生效

    1、问题背景

         利用select2生成可搜索下拉框,并且绑定切换事件;但是直接绑定change事件,发现不起作用


    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(){
    		$("#selData").select2();
    		
    		$("#selData").off().on("change",function(){
    			var data = $(this).val();
    			alert(data);
    		});
    	});
    </script>
    </head>
    <body>
    	<div>
    		<select id="selData" class="js-example-basic-single" style="300px;">
    			<option value=""></option>
    			<option value="1">李四</option>
    			<option value="2">王武</option>
    			<option value="3">华章</option>
    			<option value="4">司徒</option>
    			<option value="5">朝华</option>
    			<option value="6">沈磊</option>
    		</select>
    	</div>
    </body>
    </html>
         上述代码,下拉搜索框切换事件直接使用change,发现选中的值不能回填到框中



    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(){
    		$("#selData").select2();
    		
    		$("#selData").on("select2:select",function(){
    			var data = $(this).val();
    			alert(data);
    		});
    	});
    </script>
    </head>
    <body>
    	<div>
    		<select id="selData" class="js-example-basic-single" style="300px;">
    			<option value=""></option>
    			<option value="1">李四</option>
    			<option value="2">王武</option>
    			<option value="3">华章</option>
    			<option value="4">司徒</option>
    			<option value="5">朝华</option>
    			<option value="6">沈磊</option>
    		</select>
    	</div>
    </body>
    </html>


             将change换成select2:select,这样下拉搜索框可以回填值了


  • 相关阅读:
    7.ps相关选项
    6.ps的大U和小u区别
    5.进程优先级
    4.状态间的六种转换情况
    3.进程的不同状态
    2.进程与程序的关系
    1.进程概念
    不换行
    for引用变量
    脚本进阶
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13313845.html
Copyright © 2011-2022 走看看