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. 学Git，用Git ①

    本月开始接触到Git版本管理工具,觉得很有意思,在这里总结一下学习Git的一些心得体会. 要在Mac上完整的使用git进行版本管理,需要熟悉Mac终端操作命令和Git操作命令两种命令,索性两种命令加在 ...

  2. MR案例：基站相关01

    字段解释: product_no:用户手机号: lac_id:用户所在基站: start_time:用户在此基站的开始时间: staytime:用户在此基站的逗留时间. product_no lac_ ...

  3. poj_2528 Mayor's posters （线段树经典题+离散化方法）

    由于题面中给定的wall最大长度为10 000 000:若简单用线段树势必会超时. 而注意到题面中规定了输入海报的个数<=1000:因此不妨离散化,使得线段中叶节点仅含有1000个,那么线段最大 ...

  4. integration asp.net web api with autofac and owin

    There is an example project showing Web API in conjunction with OWIN self hosting https://github.com ...

  5. 【转】chrome 67版本后无法拖拽离线安装CRX格式插件的解决方法

    第一种:开启开发者模式即可 (推荐) chrome  的设置 -> 更多工具 -> 扩展程序,开启开发者模式即可! 第二种方法:修改参数 首先打开下面地址:chrome://flags/# ...

  6. Ubuntu+apache安装redmin

    公司要迁移redmin,本来以为是一个很简单的项目,想不到整整搞了一天加一个晚上. 首先是对ruby的安装不熟悉,现在明白了ruby的安装顺序是先安装rvm版本管理,然后用rvm安装ruby,安装好后 ...

  7. C# 生成图片缩略图

    最近项目有部分需求,是关于图片操作部分的, 大致的功能就是图片的保存和展示.但是直接操作原图,程序运行效率太慢.而且如果传输数据量过大的话,可能直接导致调用WCF服务失败的问题. 为了解决这个问题,决 ...

  8. 利用Object.defineProperty实现Vue数据双向绑定

    body部分很简单,一个输入框和一个展示的div <div> <p>你好,<input id='nickName'></p> <div id=&q ...

  9. js打乱数组的实战应用

    文章首发于: https://www.xiabingbao.com/post/javascript/js-random-array.html 在js中,能把数组随机打乱的方法有很多,每个方法都有自己的 ...

  10. web页面中 将几个字段post提交

    思路 自己在html中构建form 先根据传入的action构建form的action  然后根据要提交的字段构建form中的元素  最后通过调用form中的按钮提交from表单 方法:var jsP ...