在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>声明：禁止任何非法用途使用，凡因违规使用而引起的任何法律纠纷，本站概不负责。
精彩评论