html select标签 点击选中事件

最新推荐文章于 2023-07-03 18:44:55 发布
最新推荐文章于 2023-07-03 18:44:55 发布
阅读量2.7w 收藏 13
点赞数 5
分类专栏： jsp网页学习专栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37591637/article/details/88835811
版权

html   select标签 点击选中事件

js事件

οnchange="gradeChange(this.options[this.options.selectedIndex].text)"

获取文本的值
this.options[this.options.selectedIndex].text  是文本的值

获取value的值
this.options[this.options.selectedIndex].value 是value值

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>田氏</title> 
</head>
<body>

<select id="slt" onchange="gradeChange(this.options[this.options.selectedIndex].text)" >
  <option value="0">蔬菜</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>
  <option value="7">农业快讯</option>
</select>
  
</body>
	<script>
		function gradeChange(tx){
			alert(tx);
			this.options[this.options.selectedIndex].text;
		}
	</script>
</html>

 

qq_37591637
关注
  • 5
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
JQuery 绑定select标签的onchange事件，弹出选择的值，并实现跳转、传参
10-28
JQuery 绑定select标签的onchange事件，弹出选择的值，并实现跳转、传参（selected的值和页面其它元素的值）
css禁止html标签被选中的方法
12-13
以下CSS样式实现了各浏览器的标签禁止选中功能。 复制代码代码如下:moz-user-select: -moz-none;-moz-user-select: none;-o-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;
jQuery事件
qq_39828828的博客
05-05 249
开发工具与关键技术：Adobe Dreamweaver jQuery 作者：李哲定 撰写时间：2020年4月29日 一.jQuery基本事件 事件三要素：事件源、事件、事件驱动程序 1.事件源，也就是需要操作的对象，例如：var box = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲box"); 2.事件，例如：…(...
jquery操作select(取值，设置选中）
weixin_34152820的博客
05-19 2113
最近工作中总出现select 和 option问题，整理一下，内容大部分源于网络资料 一、基础取值问题 例如<select class="selector"></select> 1、设置value为pxx的项选中 $(".selector").val("pxx"); 2、设置text为pxx的项选中 $(".selector").find...
JQuery select各种事件
qq_34823218的博客
11-14 1012
一、基础取值问题 例如<select class="selector"></select> 1、设置value为pxx的项选中 $(".selector").val("pxx"); 2、设置text为pxx的项选中 $(".selector").find("option:contains('pxx')").attr("selected",true...
JS实现select选中option触发事件操作示例
01-19
本文实例讲述了JS实现select选中option触发事件操作。分享给大家供大家参考，具体如下： 我们在用到下拉列表框select时，需要对选中的<option>选项触发事件，其实<option>本身没有触发事件方法，我们只有在select里的onchange方法里触发。 想添加一个option的触发事件,在option中添加onclick 点来点去就是不会触发事件 又在select中添加onclick 这下可好了,没选option呢就触发了 百度来的说option没有触发事件,需要在select中加onchange事件,虽然我曾经处理过类似的问题,用过就忘是不是猪脑子…. 这次记住了吧应该
前端开发——select的点击事件
热门推荐
muzimiaomiaopeng的博客
08-07 3万+
近几天，在用select-option实现一个时间选择器的时候遇到了一点问题。最开始使用select的change事件监听用户的选择，发现第一个问题：当用户连续两次点击同一个option时，不能触发change事件。想想挺合理的，value值根本就没变嘛。 于是想换一种方法，用点击事件去监听，这里不能直接监听option的点击事件，因为select下的option标签是监听不到点击事件的，只能监...
HTML select 用法及常用事件
sout-lanys
07-03 2457
用于记录开发中常用到的，快捷开发后续用到的我会继续写进去，如果有大佬遇到其他常用的，欢迎评论。
关于select标签切换事件
莫莫的家
12-30 4928
以前在使用select标签时，需要在切换选项的时候执行相应的方法代码，总会写一个js方法代码，然后在select的 onchange事件上绑定该方法，这样也可以解决问题； 但是很显然会很麻烦 找到一种特别方便的解决方案： onchange="self.location.href=options[selectedIndex].value" 这句代码放在select标签中即可实现，当然这个
html select标签 选择事件_JavaScript事件
weixin_39817215的博客
11-29 1043
https://www.zhihu.com/video/1246190056504356864测验今日考题 答案1.列举你所知道的PEP8 Python编码规范 =左右有一个空格，给函数传参数不用加空格 + - > < >= <+ != 左右有一个空格 普通函数之间，或者函数与其他代码之间有一个空行 对象与其他代码有两个空行 要有缩进 每行最多79个字符 2.求结果...
封装html的select标签的js操作实例
10-27
本文将为大家介绍下正如标题所示的select操作:清空所有的选项、添加一个选项、根据值、选中一个选项、根据下标，选中一个选项，感兴趣的朋友可以参考下哈，希望对大家有所帮助
html下拉菜单提交后保留选中值而不返回默认值
12-13
复制代码代码如下:<html> <body> <?php // 获取select值 $select_...php // 如果在上面获取的值和这个option里的值一样， // 就打印selected，让这个option默认被选中 echo $select_value == ‘option1
JavaScript实现通过select标签跳转网页的方法
11-25
本文实例讲述了JavaScript实现通过select标签跳转网页的方法。分享给大家供大家参考，具体如下： 我们经常有遇到需要用select标签跳转到新网页的情况，dw生成的代码太复杂，那么有没有精简的代码得以实现呢？经过...
JavaScript, select标签元素左右移动功能实现
01-19
初始界面如下图,选中左面标签中的几个选项后再点–>,则将他们移动到右侧框内,同时左侧选项消失.点击====>后,左侧全部选项移动到右侧.点击右侧几个选项后,再点<—,则这些选项移动到左侧,点<====,则右侧全部选项...
锂电池涂布模头，全球前7强生产商排名及市场份额.docx
05-06
锂电池涂布模头，全球前7强生产商排名及市场份额
ISO IEC 21964-2-2018.pdf
05-06
ISO IEC 21964-2-2018.pdf
编译程序构造的一般原理和基本方法.pdf
05-06
编译原理是计算机专业的一门核心课程，旨在介绍编译程序构造的一般原理和基本方法。编译原理不仅是计算机科学理论的重要组成部分，也是实现高效、可靠的计算机程序设计的关键。本文将对编译原理的基本概念、发展历程、主要内容和实际应用进行详细介绍编译原理是计算机专业的一门核心课程，旨在介绍编译程序构造的一般原理和基本方法。编译原理不仅是计算机科学理论的重要组成部分，也是实现高效、可靠的计算机程序设计的关键。本文将对编译原理的基本概念、发展历程、主要内容和实际应用进行详细介绍编译原理是计算机专业的一门核心课程，旨在介绍编译程序构造的一般原理和基本方法。编译原理不仅是计算机科学理论的重要组成部分，也是实现高效、可靠的计算机程序设计的关键。本文将对编译原理的基本概念、发展历程、主要内容和实际应用进行详细介绍编译原理是计算机专业的一门核心课程，旨在介绍编译程序构造的一般原理和基本方法。编译原理不仅是计算机科学理论的重要组成部分，也是实现高效、可靠的计算机程序设计的关键。本文将对编译原理的基本概念、发展历程、主要内容和实际应用进行详细介绍编译原理是计算机专业的一门核心课程，旨在介绍编译程序构造的一般原理和基本
海关商品编码/HS编码表
05-06
用于海关申报商品编码/HS编码信息
node-v9.6.1-linux-arm64.tar.xz
最新发布
05-06
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
select标签触发点击事件
07-14
当选择 `<select>` 标签中的选项时，可以使用 JavaScript 来触发点击事件。以下是一个示例： HTML: ```html <select id="mySelect"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select> ``` JavaScript: ```javascript const selectElement = document.getElementById("mySelect"); selectElement.addEventListener("change", function() { const selectedOption = selectElement.value; // 在这里执行你想要触发的点击事件操作 console.log("选中的选项是: " + selectedOption); }); ``` 在上面的示例中，我们首先通过 `getElementById` 方法获取到 `<select>` 元素，并将其赋值给 `selectElement` 变量。然后，我们使用 `addEventListener` 方法来添加一个 `change` 事件监听器。当选择的选项改变时，该事件将被触发。 在事件处理函数中，我们可以通过 `value` 属性获取到当前选择的选项的值，并在控制台上打印出来。你可以在事件处理函数中执行你希望触发的点击事件操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_37591637

请给我持续更新的动力~~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值