获取表单元素各值相关

作者:admin 日期:2017-03-30

Javascript获取select下拉框选中的的值

程序代码

1、使用javascript原生的方法获取值

获取select对象： var myselect=document.getElementById("switch");

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

获取选中项options的value：  myselect.options[index].value;

获取选中项options的text：  myselect.options[index].text;

2、jquery方法获取值（前提是已经加载了jquery库）

var options=$("#switch option:selected");  //获取选中的项

console.log(options.val());   //拿到选中项的值

console.log(options.text());   //拿到选中项的文本

HTML代码

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8">
    <title>Forms</title> 
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0;">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head> 
<body>

$( "#switch" ).bind( "change", function() {
            var options=$("#test option:selected");  //获取选中的项
        
            console.log(options.val());   //拿到选中项的值
            console.log(options.text());   //拿到选中项的文本
        });
        
    </script>
</div>

</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

分类:学无止境 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 11