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

最新推荐文章于 2023-11-22 14:00:00 发布
最新推荐文章于 2023-11-22 14:00:00 发布
阅读量5.4k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cblstc/article/details/74110173
本文介绍了使用 jQuery 和原生 JavaScript 获取下拉列表 (select) 中被选中项 (option) 的 value 值及自定义属性的方法。通过示例展示了如何在 onchange 事件触发时传递这些值到处理函数。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

更新记录：

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("属性名")


react通过onChange传输select的value数据
weixin_45705239的博客
05-11 591
当 Select 组件的选项变更时，如果组件本身就是设计为直接传递新的值（在这种情况下是选定的车位 ID）给 onChange 回调函数，那么便不需要从事件对象中提取该值。在你的代码中，store.getState().setTargetParkingSpace 准备好接收该 ID，并且被用作 onChange 的回调。这种行为意味着 Select 组件的实现方式是预期其 onChange 属性将一个值传递给回调函数，而不是传递一个完整的事件对象。这在一些UI库中很常见，尤其是那些旨在简化表单处理的库。
下拉菜单中option选项触发事件功能实现
tomorrownan的博客
11-06 1万+
功能描述：做一个下拉菜单，点击下拉菜单中的每一个子项切换到该菜单对应的内容。 分析：使用select标签完成下拉菜单的样式，然后写各个option选项的内容。第一次使用click点击事件绑定方式，没有实现切换功能。查阅资料得知select标签没有click事件，但是有change和onchange事件。 change()：当元素的值发生改变时会发生change事件（仅用于表单字段），chang...
下拉菜单（利用的onchange事件）
阿鑫的家
08-26 2561
//利用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 646
在润乾报表中，我们提供了多种多样的填报编辑风格，其中下拉数据集是较为常见的一种。在下拉数据集中，我们可单独设置数据列和显示列，这样在传递的时候传递的是数据列，而在页面中显示的是显示列。   这样，在传递的时候就传递的是数据列（真实值）了。 但有在有一些情况下，我们需要传递显示列的值，那要如何做呢？ 这里我们就用到了动态参数的概念。 动态参数是一个表达式（不用等号开头），报表运算
Bug修改：React中onClick/onChange传值 （bind绑定/箭头函数）
CSmengy473的博客
09-14 867
项目场景：前端点击下载附件 使用某一个特定button按钮 Button onClick={this.handleDownload("stations")} 点击任意button，handleDownload函数会无条件被触发，都会导致无限制下载。 handleDownload=(mode)=>{ //操作 } 学习React中点击事件传参 问题描述： 使用某一个特定button按钮 Button onClick={this.handleDownload("stations")} 点
javascript中select下拉框的用法总结
11-24
本文将详细讲解如何使用JavaScript操作`select`下拉框，包括选择`option`中的值以及与后台交互时传递自定义属性。 **问题1：选择select的option里面的值** 当用户在下拉框中选择一个选项时，我们通常需要监听这个...
jQuery Selectric下拉框菜单
06-24
接着，只需调用`$.fn.selectric`方法，并将选择器作为参数传递，即可初始化插件。例如： ```javascript $(document).ready(function() { $('select').selectric(); }); ``` 这将把所有`<select>`元素转化为...
HTML中创建可输入下拉框的两种方法
每个`<option>`元素必须包含`value`属性，此属性定义了当选项被选中时所传递的值。 ### 知识点二：生成可输入的下拉框 1. 第一种方式：使用HTML和JavaScript。我们可以创建一个常规的下拉列表，然后通过JavaScript...
jsp实现连动下拉框
01-08
这段代码的作用是当第一个下拉框中的选项发生变化时，会触发 `onChange` 事件，然后根据当前选中项的 `value1` 属性值来更新 URL，从而重新加载页面并传递参数。 #### 7. 完善 JavaScript 代码 为了使连动效果更加...
Select下拉框中onchange事件赋值选择的option的value值的方法
kiven9609的博客
03-19 1491
方法一： <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 3135
//使用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 2538
click.native等同于在子组件内部处理click事件并向外发送click事件：$emit('click',fn)。监听点击事件，实际上是监听了组件内部封装的一个模拟点击事件，并不是真正的原生点击事件。需求：新增保存后进入该修改界面，点击select框时(未点击option选项前)，需要调用接口返回的数据触发option选项展示对应背景颜色的事件；综上，为了避免对select框设置的click事件不失效，需要在以上代码的@click事件中加入修饰符.native即可。
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 3089
一般是通过bind 函数绑定 this，来传递参数的，没有参数就是下面这种方式或者直接写函数名，代码如下： //被触发函数写法： const onChange = (e) => { //操作 } onChange={onChange} or onChange={onChange.bind(this)} 有参调用，代码如下： //被触发函数写法： const onChange = (index, e) => { //操作 } 传值调用...
JS对select操作
weixin_34327761的博客
01-30 730
  1.动态创建select       function createSelect(){ var mySelect = document.createElement("select");          mySelect.id = "mySelect";           document.body.appendChild(mySelect);      } 2.添加选项option...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值