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="width: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="width: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,这样下拉搜索框可以回填值了

select2切换事件如何生效的更多相关文章

  1. jq点击事件不生效,效果只闪现一次又立马消失的原因?

    出现的问题:jq点击事件不生效,点击的时候效果实现但又立马消失,页面重新刷新了一次 可能出现的原因: a标签href属性的原因,虽然点击事件生效,但页面又刷新了一次,所以没有效果,只闪了一次 解决方案 ...

  2. jq点击事件未生效

    jq点击事件未生效,应写成事件委托的方式 // $(function(){ // $('.current a').on("click", function(){ // $(this ...

  3. JS -判断、监听屏幕横竖屏切换事件

    通过监听window.orientationchange事件,当横竖屏切换事件时触发 <!doctype html> <html> <head> <title ...

  4. Safair 浏览器cllick事件不生效或者需要双击才生效

    针对Safair 浏览器cllick事件不生效或者需要双击才生效的解决方案. 方法一:给元素加上cursor: pointer样式.(不生效) 方法二:ios事件机制不一样,将click事件改为mou ...

  5. C# tabconctrol切换事件

    tabconctrol没有click事件,切换page时,调用SelectedIndexChanged事件: private void tabControl1_SelectedIndexChanged ...

  6. 为什么Jquery对input file控件的onchange事件只生效一次

    今天在做jquery对input file控件的onchange事件进行监听,就一直只生效一次,不知道Jquery为什么对file控件没有做到每次改变触发onchange事件的效果,但是还是有好几种解 ...

  7. IOS设备上给body绑定click事件不生效及其解决办法

    事件背景: 最近在做一个移动端业务的时候碰到一个bug,在ios上对body绑定click事实现事件代理冒泡至某些元素上尽然不生效. 思考: 暂借助jquery展示下事件绑定代码,将所有标签含有dat ...

  8. 解决Android 7.0 App内切换语言不生效的问题

    Android7.0及以前版本,Configuration中的语言相当于是App的全局设置: public static void changeAppLanguage(Context context, ...

  9. 小程序的tab切换事件

    index.wxml代码 <view class="tab-left" > <view " bindtap="tab">tab ...

随机推荐

  1. SQL系列 - SQL语句优化个人总结

    关于SQL语句优化方法 有些是通用的(如避免Select *): 有些不同的数据库管理系统有所区别(如Where子句顺序): 然后必须根据实际环境进行调优,因为即使是相同的数据库和表,在数据量或其他环 ...

  2. nginx搭建mp4流服务器

    流媒体服务器 流媒体指以流方式在网络中传送音频.视频和多媒体文件的媒体形式.相对于下载后观看的网络播放形式而言,流媒体的典型特征是把连续的音频和视频信息压缩后放到网络服务器上,用户边下载边观看,而不必 ...

  3. 【jdk源码分析】java多线程开启的三种方式

    1.继承Thread类,新建一个当前类对象,并且运行其start()方法 package com.xiaostudy.thread; /** * @desc 第一种开启线程的方式 * @author ...

  4. (转)一个大牛的acm历程(看着就要颤抖)

    从我接触程序竞赛到现在应该有十多年了,单说ACM竞赛,从第一次非正式参赛到现在也差不多有7年多的样子.有太多的故事,想说的话,却一直没能有机会写下来.一方面是自己忙,一方面也是自己懒.所以很感谢能有人 ...

  5. linux一键修改mysql密码脚本

    乱七八糟的shell脚本大集合 #!/bin/bash mysql_root_pwd=$( ; echo) mysql_cnf_path=$ export mysql_passwd=$mysql_ro ...

  6. Java Collections Framework 汇总

    1. Java Collections Framework Java集合框架概览 2. Java Collections Framework 之 RandomAccess接口 3. 关于ArrayLi ...

  7. JDBC 插入大批量数据

    时不时会有大量数据的插入操作,方式有多种,效率不同: 1. statement 2. prepareStatement 3. statement/prepareStatement + batch 4. ...

  8. dpdk CUSE

    As the Userspace I/O HOWTO says For many types of devices, creating a Linux kernel driver is overkil ...

  9. Js上下左右无缝隙滚动代码

    转载:http://www.cnblogs.com/chenjt/p/4193464.html 主要用到dom.offsetWidth 这个表示实际的宽度. dom.scrollLeft 这个表示这个 ...

  10. ADC和RTC的寄存器的读取

    ADC的寄存器读取,int adc_read(void){ int result; #if ADSTART==0 result = ADC.ADCDAT0&0x3ff; while(!(ADC ...