下拉框onchange方法传递option自定义属性

最新推荐文章于 2025-05-13 12:08:14 发布
原创 最新推荐文章于 2025-05-13 12:08:14 发布 · 5.4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了使用 jQuery 和原生 JavaScript 获取下拉列表 (select) 中被选中项 (option) 的 value 值及自定义属性的方法。通过示例展示了如何在 onchange 事件触发时传递这些值到处理函数。

更新记录：

2018.1.24，添加了jquery获取option自定义属性的方法

——————————————————————————————————————————

1 传递option的value值

onchange="方法名(this.value)"  或者
onchange="方法名(options[this.options.selectedIndex].value)

2 传递option自定义属性 

onchange="方法名(options[this.options.selectedIndex].getAttribute('属性名'))"

3 jquery获取option自定义属性的方法

$("select").find("option:selected").attr("属性名")


javascript中select下拉框的用法总结
11-24
本文将详细讲解如何使用JavaScript操作`select`下拉框，包括选择`option`中的值以及与后台交互时传递自定义属性。 **问题1：选择select的option里面的值** 当用户在下拉框中选择一个选项时，我们通常需要监听这个...
jQuery Selectric下拉框菜单
06-24
接着，只需调用`$.fn.selectric`方法，并将选择器作为参数传递，即可初始化插件。例如： ```javascript $(document).ready(function() { $('select').selectric(); }); ``` 这将把所有`<select>`元素转化为...
react通过onChange传输select的value数据
weixin_45705239的博客
05-11 661
当 Select 组件的选项变更时，如果组件本身就是设计为直接传递新的值（在这种情况下是选定的车位 ID）给 onChange 回调函数，那么便不需要从事件对象中提取该值。在你的代码中，store.getState().setTargetParkingSpace 准备好接收该 ID，并且被用作 onChange 的回调。这种行为意味着 Select 组件的实现方式是预期其 onChange 属性将一个值传递给回调函数，而不是传递一个完整的事件对象。这在一些UI库中很常见，尤其是那些旨在简化表单处理的库。
下拉菜单（利用的onchange事件）
阿鑫的家
08-26 2579
//利用select>的onchange事件打开别的网站select onchange="navigate(http://www.+this.options(this.selectedIndex).value+.com)">    //this.options(this.selectedIndex).value这个好像用于引用下面value=baidu的“baidu”这个字
select onchange方法传值
ms
11-22 1万+
javascript select onchange方法传值
如何将下拉数据集中的显示值作为参数传递
rqgxy的博客
11-28 668
在润乾报表中，我们提供了多种多样的填报编辑风格，其中下拉数据集是较为常见的一种。在下拉数据集中，我们可单独设置数据列和显示列，这样在传递的时候传递的是数据列，而在页面中显示的是显示列。   这样，在传递的时候就传递的是数据列（真实值）了。 但有在有一些情况下，我们需要传递显示列的值，那要如何做呢？ 这里我们就用到了动态参数的概念。 动态参数是一个表达式（不用等号开头），报表运算
Bug修改：React中onClick/onChange传值 （bind绑定/箭头函数）
CSmengy473的博客
09-14 892
项目场景：前端点击下载附件 使用某一个特定button按钮 Button onClick={this.handleDownload("stations")} 点击任意button，handleDownload函数会无条件被触发，都会导致无限制下载。 handleDownload=(mode)=>{ //操作 } 学习React中点击事件传参 问题描述： 使用某一个特定button按钮 Button onClick={this.handleDownload("stations")} 点
HTML中创建可输入下拉框的两种方法
每个`<option>`元素必须包含`value`属性，此属性定义了当选项被选中时所传递的值。 ### 知识点二：生成可输入的下拉框 1. 第一种方式：使用HTML和JavaScript。我们可以创建一个常规的下拉列表，然后通过JavaScript...
一文彻底掌握HarmonyOS NEXTArkUI 弹出框全攻略：从自定义到「即用型」，轻松拿捏交互体验
最新发布
程序员Feri
05-13 575
适合需要动态更新弹窗属性的场景，比如根据用户输入实时变化的内容。它支持「模态」（必须处理完才能继续）和「非模态」（可暂时忽略）两种模式，还贴心配备了生命周期钩子：，让你全程掌控弹窗的「出生到离场」。自定义弹出框：适合复杂布局（如带表单、图片的弹窗），自由度MAX，相当于「私人定制」。固定样式弹出框：适合高频简单场景（确认、选择、时间日期），开箱即用，省时高效。掌握这些弹窗技巧，你的App交互体验绝对能让用户眼前一亮！记住：弹窗是和用户「对话」的桥梁，合理使用既能传递关键信息，又不会让人感到打扰～
Select下拉框中onchange事件赋值选择的option的value值的方法
kiven9609的博客
03-19 1504
方法一： <select οnchange="getSelectValue(this.value)"> <option value=" "></option> </select> 方法二： <select οnchange="getSelectValue(this.options[this.options.selected...
前端select onchange事件 默认选中后台传来option中value值
qq_40010745的博客
07-05 3148
//使用c标签遍历list取值 &lt;select name="hospital" class="form-control" onchange="changeHospital(this.options[this.options.selectedIndex].value)"&gt; &lt;option value="" label=" 请选择"/&gt;     &
select 下拉菜单取值问题
小樓東風的专栏
08-06 1万+
提问： 我现在有一个select的下拉菜单，当我选定之后，触发onChange事件，然后根据所选的字段再去数据库查找，返回的值加载到另外一个select下拉菜单。怎么处理这种情况呢？    回答：//onChange事件,调用js的doChange方法,   获得选择的值,重新刷新页面,    function   doChange()   {    var   selectVal
vue回显数据 实现点击select框时触发onclick()事件，点击option选项时触发onchange()事件
m0_53682699的博客
11-22 2623
click.native等同于在子组件内部处理click事件并向外发送click事件：$emit('click',fn)。监听点击事件，实际上是监听了组件内部封装的一个模拟点击事件，并不是真正的原生点击事件。需求：新增保存后进入该修改界面，点击select框时(未点击option选项前)，需要调用接口返回的数据触发option选项展示对应背景颜色的事件；综上，为了避免对select框设置的click事件不失效，需要在以上代码的@click事件中加入修饰符.native即可。
下拉菜单中option选项触发事件功能实现
tomorrownan的博客
11-06 1万+
功能描述：做一个下拉菜单，点击下拉菜单中的每一个子项切换到该菜单对应的内容。 分析：使用select标签完成下拉菜单的样式，然后写各个option选项的内容。第一次使用click点击事件绑定方式，没有实现切换功能。查阅资料得知select标签没有click事件，但是有change和onchange事件。 change()：当元素的值发生改变时会发生change事件（仅用于表单字段），chang...
select下拉框添加onchange事件获取option的value值的方法
lcw2007101的专栏
03-12 2万+
这里介绍两种select下拉框添加onchange事件获取option的value值的方法： 方法一： HTML &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;select onchange 传值&lt;/title&gt;
HTML 下拉框 select option 详解
热门推荐
3月3的风筝
02-20 5万+
一、基础理解:    var e = document.getElementById("selectId");    e. options= new Option("文本","值") ;    //创建一个option对象,即在标签中创建一个或多个文本    //options是个数组,里面可以存放多个文本这样的标签 1:options[ ]数组的属性:
React onClick/onChange 传参 （bind绑定）
专注基础架构领域
10-21 3186
一般是通过bind 函数绑定 this，来传递参数的，没有参数就是下面这种方式或者直接写函数名，代码如下： //被触发函数写法： const onChange = (e) => { //操作 } onChange={onChange} or onChange={onChange.bind(this)} 有参调用，代码如下： //被触发函数写法： const onChange = (index, e) => { //操作 } 传值调用...
JS对select操作
weixin_34327761的博客
01-30 753
  1.动态创建select       function createSelect(){ var mySelect = document.createElement("select");          mySelect.id = "mySelect";           document.body.appendChild(mySelect);      } 2.添加选项option...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值