通过js来获取select的全部值，包括id，text，value

最新推荐文章于 2020-07-05 14:43:35 发布
转载 最新推荐文章于 2020-07-05 14:43:35 发布 · 6.2k 阅读 · 2

本文通过一个具体的HTML与JavaScript结合的例子展示了如何在网页中实现下拉菜单功能，并详细解释了如何通过JavaScript获取下拉菜单中被选中的选项值及对应的ID。此示例适用于初学者学习JavaScript的基本用法。

<html>
<head>
<title></title>
<script type=text/javascript>
function getselect(n){
var v = '';
var t = '';
for(var i = 0; i < n.options.length; i++){
if(i==0){
t = n.options[i].id;
v = n.options[i].value;
}else{
t += ','+n.options[i].id;
v += ','+n.options[i].value;
}
}
alert(v+'|'+t);
}
</script>
</head>
<body>
<table>
<form name="form1">
<tr>
<td>
<select name="n1" id="n1">
<option value='1' id="a">项目1</option>
<option value='2' id="b">项目2</option>
<option value='3' id="c">项目3</option>
<option value='4' id="d">项目4</option>
<option value='5' id="e">项目5</option>
</select>
</td>
</tr>
<tr>
<td><a onclick="getselect(document.form1.n1)" href="#">获取</a></td>
</tr>
</form>
</table>
<body>
</html>

JavaScript获取select中text值的方法
01-19
本文实例讲述了JavaScript获取select中text值的方法。分享给大家供大家参考，具体如下： 别的不说,先看代码: 方法一： <select name=parent_id onchange=setTitleAndLinkByGoodsCategory(this.value,this.options[this.selectedIndex].text); > <option value=0>请选择商品分类</option> <option value=1>家电</option> <option value=2>数码</option> <optio
JS获取select的value和text值的简单实例
12-02
本文将详细讲解如何通过JavaScript获取`<select>`元素的`value`和`text`值，以及如何动态添加`<option>`。 首先，让我们分析一下给出的代码片段： ```html <select id="cityList"> <!-- 省略部分 --> </select> ...
javascript获取select的值全解
学习 进步
05-24 1004
获取显示的汉字 document.getElementById("bigclass").options[window.document.getElementById("bigclass").selectedIndex].text 获取数据库中的id window.document.getElementById("bigclass").value 获取select组分配的索引id wind...
js获取select的值
而我想……成为一个有趣的妞
07-17 2866
//获取select的value值 var coach_id =$('#coach option:selected') .val(); //获取select的文本值 var coach_name = $('#coach option:selected').text();  
JS获取select选中的值，所有option值
weixin_30914981的博客
11-03 1267
<select name="myselect" id="myselect">　　　　<option value="2042">1--测试二级页面专题</option>　　　　<option value="2031">2--2016年浙江省大学生艺术节</option>　　　　<option value="1983"&gt...
获取select的value、text值的简单示例（jquery与javascript）
11-29
在使用时，请确保`<select>`元素的ID与代码中的一致，这样才能正确地获取到对应的`value`和`text`值。同时，对于大型项目，jQuery提供了一套更丰富的API，使得DOM操作更为简便；而在轻量级或性能敏感的场景下，原生...
vue.js 获取select中的value实例
10-18
通过这个简单的实例，我们学习到了如何在Vue.js中利用v-model和v-for指令来获取和显示select下拉列表中的选中值。这种方式提供了一个快速方便的方法来实现表单输入与Vue实例数据之间的同步。这样的数据绑定不仅简化...
js获取select标签选中的值
热门推荐
weixin_38098192的博客
07-20 1万+
js获取select选中的值 var obj = document.getElementByIdx_x(”testSelect”); //定位id var index = obj.selectedIndex; // 选中索引 var text = obj.options[index].text; // 选中文本 var value = obj.options[index].value; ...
如何获得select被选中option的value和text和......
lxw1844912514的博客
11-12 1632
我想获取select选中的value，或者text，或者……比如这个： <select id="select"> <option value="A" url="http://www.baidu.com">第一个option</option> <option value="B" url="http://www.qq.com...
获取select的option值及其文本
weixin_34311757的博客
03-04 1295
在jQuery中选择select标签的方法有： $("#selectId") 和 $("select[name='selectName']") 1.获取select选择的值,选择了select之后直接用val()： 例如：$("#selectId").val()或者$("select[name='selectName']").val(); 2.获取select的文本值，选择了select之...
JS获取页面select元素
nicknailo博客
09-07 3050
博士 硕士 本科 大专 var a=document.getElementById('edu'); alert("显示栏位选择的文本的值："+a.value); //显示selelct内的option栏位页面 alert("a.innerHTML:"+a.innerHTML); /*遍历option1*/ /*var b=a.getElementsByTa
得到select所有option里的值
virtualjxc的专栏
12-16 3223
1：//取得所有的option个数document.getElementById(---).options.length2：//取得每个option的ID值document.getElementById(---).options[i].value3：//取得每个option在页面显示的文本document.getElementById(---).options[i].text
JS获取select选中的value和内容
qq_38657283的博客
07-24 6361
 不说废话，直接上代码 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head...
js获取多个select下拉框选中的值
qq_38410795冰淇淋的博客
03-27 4200
js获取多个select下拉框选中的值 var electronicIds = []; $("select[name='electronicId']").each(function(j,item){ electronicIds.push(document.getElementsByTagName("select")[j].value); }); 例子： var row= "<div cla...
用js获取select所选的值
weixin_33704234的博客
09-02 158
<script type="text/javascript"> function change(obj){ var strsel = obj.options[obj.selectedIndex].text; document.getElementById("xiangmutext").value=strsel; } &l...
js获取select值和改变select值
weixin_33985507的博客
11-01 3167
js获取select值 <scriptlanguage="javascript"> functionselectInput(choose){ alert(choose.value); alert(choose.options[choose.selectedIndex].text); ...
JS——表单操作及select多级联动下拉列表
偷只猫来养的博客
07-05 3392
JS——表单操作 一、获取表单元素 1、获取页面所有表单元素：document.forms 使用document.forms返回的是一个HTMLCollection数组，数组的元素是form，有多少个form就有多少个元素，每个元素是一个类数组，其中包含了当前表单中的所有元素及其对应的属性。 <form> <input type="text" /> <input type="password" /> <input t
js获取select选中的value值
最新发布
10-24
<think>我们正在讨论如何使用JavaScript获取select元素选中的value值。根据提供的引用，有两种主要方法：原生JavaScript方法和jQuery方法。用户明确要求JavaScript（原生）的方法，因此我们将重点放在原生方法上。 引用[1]和[2]提供了原生JavaScript的方法： 1. 直接获取select元素的value属性（最简单的方法）： ```javascript const select = document.getElementById('mySelect'); console.log('选中值:', select.value); ``` 这种方法会直接返回选中项的value属性值。如果选项没有设置value属性，则返回选项的文本内容。 2. 通过选中项的索引来获取（稍微复杂一点的方法）： ```javascript var obj = document.getElementById('mySelect'); var index = obj.selectedIndex; // 获取选中项的索引 var value = obj.options[index].value; // 通过索引获取选中项的value var text = obj.options[index].text; // 通过索引获取选中项的文本 ``` 这种方法可以同时获取value和文本，但如果只需要value，则第一种方法更简洁。 引用[3]提到了jQuery的方法，但用户没有要求，所以暂不强调。 因此，我们推荐使用第一种方法，因为它简单直接。 另外，需要注意的是： - 确保在DOM加载完成后执行这些代码，可以将代码放在`window.onload`事件中，或者将脚本放在页面底部。 - 如果select元素是动态生成的，可能需要事件监听（如change事件）来实时获取选中的值。 示例：监听select的变化并获取选中的值 ```javascript document.getElementById('mySelect').addEventListener('change', function() { console.log('当前选中值:', this.value); }); ``` 总结回答： 获取select元素选中的value值，推荐使用原生JavaScript的`selectElement.value`。 </think>根据引用内容，JavaScript 原生获取 select 元素选中值的两种主要方法如下（推荐使用第一种）： ### 方法1：直接获取 value 属性（最简洁） ```javascript const selectElement = document.getElementById('mySelect'); // 通过ID获取元素 const selectedValue = selectElement.value; // 直接获取选中值 console.log('选中值:', selectedValue); ``` **特点**： - 一行代码即可获取选中项的 `value` 属性值 - 若未设置 `value`属性，则自动返回选项的文本内容 - 兼容所有现代浏览器 [^1][^2] ### 方法2：通过选中项索引获取 ```javascript const select = document.getElementById('mySelect'); const selectedIndex = select.selectedIndex; // 获取选中项索引 const selectedValue = select.options[selectedIndex].value; // 获取对应值 console.log('索引:', selectedIndex, ' 值:', selectedValue); ``` **特点**： - 可同时获取索引位置（`.selectedIndex`） - 可扩展获取文本（`.options[index].text`） - 支持获取自定义属性（如 `url`）[^2][^3] ### 实时监听选择变化 ```javascript document.getElementById('mySelect').addEventListener('change', function() { console.log('当前选中:', this.value); }); ``` 此方法在选项变化时自动捕获新值 [^4] > ⚠️ 注意：确保 DOM 加载完成后再获取元素（可将代码放在 `window.onload` 或 `DOMContentLoaded` 事件中）
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值