获得select被选中option的value和text和属性

最新推荐文章于 2022-07-04 15:29:23 发布

转载最新推荐文章于 2022-07-04 15:29:23 发布 · 1.8k 阅读

文章标签：

#获取下拉框的相关数据

jQuery 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript原生方法和jQuery来获取HTML中select元素的选中值、文本和属性，包括获取value、text及自定义属性如url。

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

我想获取select选中的value，或者text，或者……

比如这个：

<select id="select">
 	<option value="A" url="http://www.baidu.com">第一个option</option>
  	<option value="B" url="http://www.qq.com">第二个option</option> 
</select>

一：JavaScript原生的方法

1:拿到select对象： `var myselect=document.getElementById(“select”);

2：拿到选中项的索引：var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index

3:拿到选中项options的value： myselect.options[index].value;

4:拿到选中项options的text： myselect.options[index].text;

5:拿到选中项的其他值，比如这里的url： myselect.options[index].getAttribute(‘url’);

//js写法
		function check1(){
			var Province=document.getElementById("SelProvince");
			//获取下拉框选中的索引
			var index=Province.selectedIndex;
			//拿到选中项的值,如果value没有值那么拿到的就是文本值，如果有value那么就拿value的值
			var value=Province[index].value;
			alert(value);
			//拿到选中想的文本值
			var text=Province[index].text;
			alert(text);
		}

二：jQuery方法

1:var options=$(“#select option:selected”); //获取选中的项

2:alert(options.val()); //拿到选中项的值

3:alert(options.text()); //拿到选中项的文本

4:alert(options.attr(‘url’)); //拿到选中项的url值

<script type="text/javascript">
		//jquery写法
		function check(){
			//拿到选中项的值,如果value没有值那么拿到的就是文本值，如果有value那么就拿value的值
			var Province=$("#SelProvince option:selected").val();
			alert(Province);
			//拿到选中想的文本值
			var Province1=$("#SelProvince option:selected").text();
			alert(Province1);
		}
	</script>

作者：2016_Create
来源：优快云
原文：https://blog.youkuaiyun.com/ityang521/article/details/70217320
版权声明：本文为博主原创文章，转载请附上博文链接！