jquery如何监听select的改变

监听步骤:1、利用change()给select元素绑定改变事件,并设置事件处理函数,语法“$(“select”).change(function() {…});”;2、在事件处理函数中,设置事件触发后需要执行的代码,语法“alert(“选项已被改变”);console.log($(‘select’).val());”,当发生改变后,会弹窗提醒,并获取新选项内容。

本教程操作环境:windows7系统、jquery3.6.1版本、Dell G3电脑。

在jquery中,可以利用自带的监听函数change()来监听select的改变。

当元素的值改变时发生 change 事件(仅适用于表单字段)。

change() 方法触发 change 事件,或规定当发生 change 事件时运行的函数。

注意:当用于 select 元素时,change 事件会在选择某个选项时发生。

实现步骤

步骤1:利用change()给select元素绑定改变事件,并设置事件处理函数

$("select").change(function() {	//事件触发后,执行的代码});

步骤2:在事件处理函数中,设置事件触发后需要执行的代码

$("select").change(function() {	alert("选项已被改变");	console.log($('select').val());});

这样在select发生改变后,会弹窗提醒,并获取新选项内容

实现代码:

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<script src="js/jquery-3.6.1.min.js"></script>		<script>			$(document).ready(function() {				$("select").change(function() {					alert("select已改变");					console.log($('select').val());				});			});		</script>	</head>	<body>		<div id="cont">			<select>				<option value="目的地">目的地</option>				<option value="温州">温州</option>				<option value="永嘉">永嘉</option>			</select>		</div>	</body></html>

jquery如何监听select的改变

关于“jquery如何监听select的改变”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

文章标题:jquery如何监听select的改变,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/24650

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022年9月13日 下午11:39
下一篇 2022年9月13日 下午11:40

相关推荐

  • windows xbox商店常见问题怎么解决

    xbox商店常见问题解决方法: 1、Xbox商店其实就是微软win10商店(Microsoft Store)。 2、我们可以直接在菜单中打开Microsoft Store,进行游戏的查看等。 3、我们也可以直接在搜索栏中搜索Xbox,然后打开“Xbox 控制台小帮手” 4、我们能够在侧栏目中点击“商…

    2022年9月22日
    17100
  • nwd文件怎么打开

    nwd文件能够使用“Autodesk Navisworks”软件打开;该软件是一款用于分析、仿真和项目信息交流的全面审阅解决方案,被广泛应用于建筑工程项目管理和设计方面,该软件能够帮助用户提前预测和发现项目流程中的错误,避免这些问题导致项目的中断。 本教程操作环境:windows10系统、DELL …

    2022年9月8日
    21200
  • coreldraw如何填充颜色

    coreldraw填充颜色的方法 1、打开软件选择左侧的矩形工具,在工作区域里画出一个矩形。 2、工具栏里面找到填充工具,选择均匀填充。 3、在均匀填充调色框中选择需要填充的颜色,然后点击“确定”。 4、这样就填充完成了。 关于“coreldraw如何填充颜色”的内容就介绍到这里了,感谢大家的阅读。…

    2022年9月26日
    6800
  • SQL Server怎么使用CROSS APPLY与OUTER APPLY实现连接查询

    概述 CROSS APPLY 与 OUTER APPLY 可以做到:左表一条关联右表多条记录时,我需要控制右表的某一条或多条记录跟左表匹配的情况。 有两张表:Student(学生表)和 Score(成绩表),数据如下: 一、CROSS APPLY ROSS APPLY 的意思是“交叉应用”,在查询时…

    2022年8月29日
    14100
  • windows 0xc000021a怎么手动修复

    0xc000021a手动修复方法: 方法一: 1、首先按下电脑的电源键,会重新启动电脑。 2、重复操作2-3次,会进入系统修复界面,选择“高级选项” 3、接着进入“疑难解答”,再选择进入其中的“高级选项” 4、然后在其中选择进入“命令提示符” 5、然后在命令提示符中依次分别输入“bootrec /f…

    2022年9月15日
    32400
  • Redis发布订阅实例分析

    Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息。 Redis 客户端可以订阅任意数量的频道。 订阅/发布消息图: 第一个对象:消息发送者。第二个对象:频道。第三个对象:消息订阅者。 下图展示了频道 channel1 , 以及订阅这个频道的…

    2022年9月26日
    12400
  • 如何使用exp进行SQL报错注入

    0x01 前言概述 小编又在MySQL中发现了一个Double型数据溢出。当我们拿到MySQL里的函数时,小编比较感兴趣的是其中的数学函数,它们也应该包含一些数据类型来保存数值。所以小编就跑去测试看哪些函数会出现溢出错误。然后小编发现,当传递一个大于709的值时,函数exp()就会引起一个溢出错误。…

    2022年9月6日
    29900
  • windows会声会影x10如何安装

    会声会影x10安装方法 1、首先我们下载一个会声会影x10. 2、下载完成之后找到下载位置,运行图示的安装程序。 3、在弹出窗口,我们选择语言,输入购买时获得的序列号,点击“下一步” 4、勾选“接收条款”,点击“下一步” 5、勾选“启用计划”,点击“下一步” 6、输入相关信息进行注册,完成之后点击“…

    2022年9月15日
    8200
  • 如何解决mysql深分页问题

    日常需求开发过程中,相信大家对于limit一定不会陌生,但是使用limit时,当偏移量(offset)非常大时,会发现查询效率越来越慢。一开始limit 2000时,可能200ms,就能查询出需要的到数据,但是当limit 4000 offset 100000时,会发现它的查询效率已经需要1S左右,…

    2022年9月13日
    36100
  • cdr钢笔工具如何使用

    cdr钢笔工具的使用方法和技巧: 1、打开cdr,在左边工具栏就能找到钢笔工具。 2、选中后,点击起始点并点击第二个点就能绘制一条线。 3、如果按住键盘“shift”键,就可以绘制一条水平的直线了。 4、如果按住第二个点,拖动鼠标,就可以绘制曲线。 5、沿着蓝色线拖动鼠标,可以继续绘制曲线。 6、如…

    2022年8月30日
    12400
联系我们
站长微信
站长微信
分享本页
返回顶部