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. JasperReports实现报表调出excel

    一.利用工具iReport 创建task.jrxml 模板 并生成 task.jasper 文件 二.搭建工程导入以下jar包 commons-beanutils-1.9.2.jar commons- ...

  2. svn根据项目来创建目录结构或者根据分支来创建项目结构

    假设检出项目的时候,都使用trunk来进行检出 按照项目来创建目录结构 TestPrj版本库 适合一次只检出一个项目的需求 这个版本库的名字无所谓,随便起就好了.因为检出某一个项目的trunk的时候, ...

  3. 【bzoj4976】宝石镶嵌（思维dp）

    题目传送门:bzoj4976 不得不说这是道脑洞dp,思路真的清奇. 我们可以发现,虽然n很大,但是k只有100,这里面似乎隐藏了什么玄机. 我们可以发现,设总共有$ tot $个二进制位在这n个数中 ...

  4. 【cs231n】线性分类笔记

    前言 首先声明,以下内容绝大部分转自知乎智能单元,他们将官方学习笔记进行了很专业的翻译,在此我会直接copy他们翻译的笔记,有些地方会用红字写自己的笔记,本文只是作为自己的学习笔记.本文内容官网链接: ...

  5. JSon数据类型&使用基础

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. sscanf输入总结

    2017-08-21 15:09:47 writer:pprp sscanf很好用的,一般配合gets()来使用 /* theme: usage of sscanf writer:pprp date: ...

  7. JavaScript高级程序设计-读书笔记（1）

    第1章 JavaScript简介 JavaScript是一种专为与网页交互而设计的脚本语言,由下列三个不同的部分组成: l        ECMAScript:提供核心语言功能: l        文 ...

  8. java classloader原理深究

    前面已经写过一篇关于java classloader的拙文java classloader原理初探. 时隔几年,再看一遍,觉得有些地方显得太过苍白,于是再来一篇: 完成一个Java类之后,经过java ...

  9. linux中的&&和&，|和||

    在linux中,&和&&,|和||介绍如下: &  表示任务在后台执行,如要在后台运行redis-server,则有  python a.py & && ...

  10. 【Python】关于使用pycharm遇到只能使用unittest方式运行，无法直接选择Run

    相信大家可能都遇到过这个问题,使用pycharm直接运行脚本的时候,只能选择unittest的方式,能愁死个人