原生js获取select的option项的label和value值

最新推荐文章于 2024-06-25 03:04:29 发布
最新推荐文章于 2024-06-25 03:04:29 发布
阅读量6.5k 收藏 2
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wdhouyigege/article/details/75095259
版权
本文展示了如何使用原生JavaScript获取select元素中选中option的label和value值。通过获取select的selectedIndex，然后从options数组中提取对应的text和value，最后将这些值绑定到两个不可编辑的文本框上。
摘要由CSDN通过智能技术生成

1.利用原生js获取select选中option项的值和文本

2.将select的选中值和文本绑定到了两个文本框上


源码:

<!DOCTYPE html>
<html>
<head>
<title>select的取值</title>
</head>
<body>
<div>
国家
<select id="country" οnchange="getVal()">
<option selected="selected" value="China">中国</option>
<option value="Canada">加拿大</option>
<option value="India">印度</o

最低0.47元/天 解锁文章
spring-boot
关注
专栏目录
表单获取select中value和text值(jquery+html)
小妮子
10-09 588
整体思路 layui 异步动态请求， 点击 确认快递单号， 异步请求服务器数据，映射下拉框， 使用layui动态监听获取下拉框值， 点击后用jquery原生获取下拉框值，赋值到隐藏域val赋值， 下拉框中value值和input隐藏域value值，一并表单传入提交 <div class="layui-form-item"> <label class="layui-form-label"><span class="x-red">*</span
javascript 获取select ->option中id、value、label属性及中内容
07-12
javascript 获取select ->option中id、value、label属性及中内容
js 获取select标签label内容
iteye_18916的博客
10-09 991
select标签内容： &lt;select name="procode" onchange="alert(this.options[this.selectedIndex].text)"&gt; &lt;option value="100"&gt;北京&lt;/option&gt; &lt;option value="200"&gt;广东&lt;
option的value、text与label
最新发布
桂云帆的博客
06-25 192
option标签的前两个属性估计大家比较常用，其中text是隐式定义的，相当于innerText或textContent，而value可以显式定义，如果不定义，它默认与text相同。那么label是什么呢？它是用来决定option显示的内容，虽然我们直接在它的开始标签与结构标签之间直接填写内容，我们也可以用来label来填写内容。
如何获得select被选中option的value和text和......
lxw1844912514的博客
11-12 1541
我想获取select选中的value，或者text，或者……比如这个： <select id="select"> <option value="A" url="http://www.baidu.com">第一个option</option> <option value="B" url="http://www.qq.com...
js 递归查找树形Options中的lable
superxxd的专栏
09-04 724
树形结构Option在vue中很常见，如需通过id查找lable，可以通过以下函数实现 diGuiTree(items,id) { //递归便利树结构 //var respvalue this.respvalue='' items.some((item) => { console.log("diGuiTree",item,id,ite
HTML之 select 标签如何获取其选中的 option 子标签
不再更新，新博客 chgl16.space
11-26 3044
&lt;select&gt;、&lt;option&gt;标签格式 &lt;select class="dropdown-menu"&gt; &lt;option value="title" role="presentation"&gt;书名&lt;/option&gt; &lt;option value="type" rol
原生select 动态渲染option，获取option的value值
hcx_hcx的博客
11-27 1757
原生select 动态渲染option，获取option的value值
vue.js 获取select中的value实例
12-28
如下所示： <!DOCTYPE html> <html lang=en> <head>...<label id=app> ...select v-model=selected >... <option v-for=option v-bind:value=option.value> {{ option.text }} </opt
el-select获取选中label值
killerdoubie的博客
03-02 2103
el-select获取选中label值
element Select组件非循环匹配方式实现同时拿到value和label的值
weixin_43569862的博客
02-25 278
后台希望我能同时传输value和label的值 可以帮助后台少一层检索 百度后大多数方案都是循环匹配，个人感觉并不是最佳方案，思考后进行优化 代码如下 <template> <div id="app"> <div id="nav"> <!-- <HelloWorld></HelloWorld> --> <el-select v-model="value" placehol.
element-ui select多选情况下获取label和value
Daisy_ls的博客
11-22 1177
【代码】element-ui select多选情况下获取label和value。
el-select获取option选中的label和value
weixin_74285634的博客
07-10 2499
【代码】el-select获取option选中的label和value
el-select获取选中的 label跟 value
JAVA5G的专栏
10-11 8723
前言 提示：在开发业务场景中我们通常遇到一些奇怪的需求： 例如：el-select业务场景需要同时获取我们选中的label跟 value。 一、方案如下： 1.给el-select加上ref ='mySelected' 代码如下（示例）： <el-select v-model="value" placeholder="请选择"> <el-option ref = ‘mySelected’ v-for="item in options" ..
elementUi的el-select同时获取value和label的三种方法
weixin_43045869的博客
12-26 3280
【代码】elementUi的el-select同时获取value和label的三种方法。
Vue：Element获取select选择框选择的value和label
孙悟空
06-27 9001
Element获取select选择框选择的value和label
jquery js处理select元素选择change事件
热门推荐
ztnhnr的专栏
07-21 1万+
在html页面中，select元素是我们经常使用的标签元素。本文介绍如何使用原生 js 和 jquery 设置select的默认选中项，以及select的选择事件处理。 准备工作： 1. 代码： <form> <label>城市：</label> <selectid="city"name="city"> <optionvalue="">请选择</option> ...
Select 的绑定值为对象类型时用法 同时获取option选项的label和value值
ishell1021的博客
10-17 1万+
如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。 export default { data() { return { comp: { compName: '', compOrgNo: '' }, compList: [ {compName: '上海分公司',compOrgNo:
树形图select框 原生js
05-12
以下是一个使用原生 JavaScript 实现树形选择框的示例代码： HTML： ```html <div id="tree-select"> <select id="tree-select-options"> <option value="">请选择</option> </select> </div> ``` JavaScript： ```js var treeData = [ { id: 1, label: "节点1", children: [ { id: 11, label: "节点1-1", children: [ { id: 111, label: "节点1-1-1", }, { id: 112, label: "节点1-1-2", }, ], }, { id: 12, label: "节点1-2", }, ], }, { id: 2, label: "节点2", children: [ { id: 21, label: "节点2-1", }, { id: 22, label: "节点2-2", }, ], }, ]; var selectOptions = document.getElementById("tree-select-options"); function generateTreeSelectOptions(data, level) { for (var i = 0; i < data.length; i++) { var option = document.createElement("option"); option.value = data[i].id; option.text = "　".repeat(level) + data[i].label; selectOptions.appendChild(option); if (data[i].children) { generateTreeSelectOptions(data[i].children, level + 1); } } } generateTreeSelectOptions(treeData, 0); ``` 该示例代码中，首先定义了一个树形数据 `treeData`，其中每个节点包含 `id` 和 `label` 属性，以及可能存在的 `children` 子节点。然后在 HTML 中定义了一个 `select` 元素，用于展示树形选择框。 接下来，在 JavaScript 中定义了一个 `generateTreeSelectOptions` 函数，用于生成树形选择框的选项。该函数接受两个参数：树形数据 `data` 和当前节点的层级 `level`。函数使用循环遍历树形数据，将每个节点作为一个选项添加到 `select` 元素中，并通过递归调用自身生成子节点的选项。 最后，在主函数中调用 `generateTreeSelectOptions` 函数，传入树形数据和初始层级 0。这样就可以生成一个树形选择框了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值