使用JavaScript或Jquery获取标准下拉框的"选中值"和"选中文本"
2015-08-26 16:37
726 查看
iLife's 博客http://blog.csdn.net/fei1502816
在html中标准下拉框很常用,经常有这样的需求在下拉框改变的时候我们需要获取它的文本或值。
初学JS的朋友经常会把它的值和文本搞错,把两者混为一谈。
有的时候还会歪打正着,因为经常我们的值就是我们的文本,但是实际它们是不同的东西。
下面我们来举个例子。
我们先建立一个下拉框,如下:
<select name="selOp" id="selOp" onchange="GetSelValue();">
<option selected value="a">a1</option>
<option value="b" >b2</option>
<option value="c" >c3</option>
<option value="d" >d4</option>
<option value="e" >e5</option>
</select>
JS代码如下:
function GetSelValue() {
var objSel = document.getElementById("selOp");
//这是获取值
alert("当前值: " + objSel.value);
//这是获取文本
alert("当前文本: " + objSel.options(objSel.selectedIndex).text);
}
JQuery代码如下:
function getSelect(){
//获取选中下拉框的值
var selValue = $("#下拉框ID option:selected").val();
//获取选中下拉框的文本
var selText = $("#下拉框ID option:selected").html();
}
在html中标准下拉框很常用,经常有这样的需求在下拉框改变的时候我们需要获取它的文本或值。
初学JS的朋友经常会把它的值和文本搞错,把两者混为一谈。
有的时候还会歪打正着,因为经常我们的值就是我们的文本,但是实际它们是不同的东西。
下面我们来举个例子。
我们先建立一个下拉框,如下:
<select name="selOp" id="selOp" onchange="GetSelValue();">
<option selected value="a">a1</option>
<option value="b" >b2</option>
<option value="c" >c3</option>
<option value="d" >d4</option>
<option value="e" >e5</option>
</select>
JS代码如下:
function GetSelValue() {
var objSel = document.getElementById("selOp");
//这是获取值
alert("当前值: " + objSel.value);
//这是获取文本
alert("当前文本: " + objSel.options(objSel.selectedIndex).text);
}
JQuery代码如下:
function getSelect(){
//获取选中下拉框的值
var selValue = $("#下拉框ID option:selected").val();
//获取选中下拉框的文本
var selText = $("#下拉框ID option:selected").html();
}
相关文章推荐
- 1. jQuery 简介
- 使用jquery.cookie.js实现记住用户信息(下面以web的记住登录名和密码为例进行说明)
- jQuery动画animate使用show hide toggle
- jquery实现平滑的二级下拉菜单效果
- jquery为新增元素添加事件
- jquery中prop()方法和attr()方法的区别浅析
- jQuery Validate 表单验证
- 自动轮播图
- jquery selector及层级选择器
- jquery实现LED广告牌旋转系统图片切换效果代码分享
- [JQ权威指南]第十二天:使用Jquery事件改变文本框的样式
- jquery实现图片水平滚动效果代码分享
- jquery validate和jquery form 插件组合实现验证表单后AJAX提交
- jquery ajax对特殊字符进行转义防止js注入使用示例
- jquery实现漂亮的二级下拉菜单代码
- JQuery中each()的使用方法说明
- jQuery.extend 函数详解
- jquery选择器
- Jquery Mobile 开发问题
- jquery中checkbox记录