javascript和jquery获取select的选中的值和选中的文本值

在web开发中 我们会经常遇到如何使用javascript或者jquery来获取select下拉列表框所选中的value属性值,以及对应的文本值,今天就记录一下在javascript和jquery中是分别如何获取到的。(注意:实现方式有很多种)详情看以下代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.7.2.js" type="text/javascript"></script>

</head>

<body>
<select name="" id="programmer">
	<option value="123">web开发工程师</option>
	<option value="99">大数据</option>
	<option value="198">云计算</option>
	<option value="256">运维工程师</option>
	<option value="300">产品经理</option>
</select>
<br/>
<input type="button" value="点击弹出选中的下拉列表框的文本值" onclick="show_selected_text();" />

<!--
如上 我在JS中如何取得这个下拉列表所选中项的文本值(不是value属性值),如果我要获取选中的文本值 比如:web开发工程师,大数据,
云计算等等 改如何使用js或者jq的方式获取呢?

因为value属性不能丢,但现在我要取 如"web开发工程师,大数据"等值!如何取呢?试了用了js的innerText属性,但得到的却是所有的,
不是选中的某一个!该如何操作?
-->

</body>
</html>
<script>

//javascript方式获取select所选中的下拉列表里的文本值以及value属性值
/*function show_selected_text()
{
	var select_obj   = document.getElementById("programmer");
	var select_index = select_obj.selectedIndex; //被选中下拉列表框的索引
	var select_text  = select_obj.options[select_index].text;  //被选中下拉列表框的文本值
	var select_value = select_obj.options[select_index].value; //被选中下拉列表框的value值
	 
	//console.log(select_text);  //这样就会在控制台输出选中下拉列表框所对应的文本值 而不是value属性的值,如果不知道控制台在哪里 可自己把console.log()函数换成弹框函数 即alert();
	
	//console.log(select_value); //输出对应的value属性值
	
}
*/

//jquery方式获取select所选中的下拉列表里的文本值以及value属性值
//需自行引用jquery库文件 本案例使用的jquery版本为:jquery-1.7.2.js
function show_selected_text()
{
	var text = $("#programmer").find("option:selected").text(); //获取所选中下拉列表所对应的文本值
	var val = $("#programmer").val();  //获取所选中下拉列表所对应的value属性值
	//alert(val);        //弹出对应的value属性值
	
	//alert(text);   //弹出对应的文本值
}
</script>


声明:禁止任何非法用途使用,凡因违规使用而引起的任何法律纠纷,本站概不负责。

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

精彩评论

全部回复12人评论7,777人参与