Js获取下拉框当前选择项的文本和值
现在有一个Id为AreaId的下拉框,要获取它当前选择项的文本和值有以下方法:
<span class="red">* </span>
地 区:
<span>
<select id="AreaId" name="AreaId" size="1" class="sel">
<option>-请选择地区-</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
</select>
</span>
方法一:使用JavaScript原生态的方法.
1.获取值:
document.getElementById("AreaId").value;//有效,能得到正确的值.
var index=document.getElementById("AreaId").selectedIndex;//获取当前选择项的索引.
document.getElementById("AreaId").options[index].value;//获取当前选择项的值.
var obj=document.getElementById("AreaId");
for(i=0;i<obj.length;i++) {//下拉框的长度就是它的选项数.
if(obj[i].selected==true) {
var text=obj[i].value;//获取当前选择项的值.
}
}
2.获取文本:
var index=document.getElementById("AreaId").selectedIndex;//获取当前选择项的索引.
document.getElementById("AreaId").options[index].text;//获取当前选择项的文本.
document.getElementById("AreaId").options[index].innerHTML;//获取当前选择项的文本.
var obj=document.getElementById("AreaId");
for(i=0;i<obj.length;i++) {//下拉框的长度就是它的选项数.
if(obj[i].selected==true) {
var text=obj[i].text;//获取当前选择项的文本.
}
}
document.getElementById("AreaId").text;//注意,这句代码无效,得到的结果为undefined.
方法二:使用JQuery方法(前提是已经加载了jquery库).
1.获取值:
$("#AreaId").val();//获取当前选择项的值.
var options=$("#AreaId option:selected");//获取当前选择项.
options.val();//获取当前选择项的值.
2.获取文本:
var options=$("#AreaId option:selected");//获取当前选择项.
options.text();//获取当前选择项的文本.
options.innerHTML();//获取当前选择项的文本.
$("#AreaId").text;//注意,这句代码无效,得到的结果为undefined.
其他属性:
innerText:
var index=document.getElementById("AreaId").selectedIndex;//获取当前选择项的索引.
document.getElementById("AreaId").options[index].innerText;//获取当前选择项的文本,IE支持,Firefox不支持.
document.getElementById("AreaId").innerHTML;//获取当前下拉框所有的元素,包括Html代码.注意大小写.
document.getElementById("AreaId").textContent;//获取当前下拉框中所有的选择项文本,不包括Html代码.
感谢您怀着耐心看完整篇博文!!!
如果文章有什么错误或不当之处,请您斧正!
您有任何意见或者建议,您可以给我发邮件,也可以在下面留言,我看到了会第一时间回复您的,谢谢!
Js获取下拉框当前选择项的文本和值的更多相关文章
- Js获取下拉框选定项的值和文本
Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...
- 原生js获取下拉框下标
// 获取下拉框所选下标 传入下拉框的id function getselectscheckitemindex (idStr) { let o = document.getElementById(id ...
- js总结:利用js获取下拉框的value值和文本值
select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛.但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的. html代码: ...
- js获取下拉框的值
获取select 选中的option的值: $("#ddlRegType").find("option:selected").val(); 获取select ...
- Js获取下拉框的值和文本select
$("#camera").change(function () { var obj = this; $("#camera_Name" ...
- js获取下拉框当前选中的值并弹出
this.options[this.selectedIndex].value --- 显示文本 this.value --- 实际存储值 调用实例: <script language=" ...
- js 获取 下拉框的值
//错误 console.log($("#DictID").select.val()); //错误 console.log($("#DictID").selec ...
- js获取下拉框的value值
var Resultstr=""; var param = { action: "MoneyList" };//参数拼接 $.ajax({ type: &quo ...
- js,jquery获取下拉框选中的option
js获取select选中的值: var sel=document.getElementById("select1"); var index = sel.selectedIndex; ...
随机推荐
- 翻译:Lisp Style Tips for the Beginner - Heinrich Taube
原文:Lisp Style Tips for the Beginner 本篇文章是一篇非正式的摘要,旨在帮助新手写出高效.易读的Lisp代码. 1 赋值 1.1 避免使用eval.赋值是Lisp内 ...
- 夺命雷公狗-----React---4--props变量的传递
提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- Url中處理空格、特殊字符
publicvoid UrlEncodeTest(){ string url ="C++ C#"; Console.WriteLine(HttpUtility.UrlE ...
- busybox-1.12.2编译提示“混合的隐含和普通规则”错误解决
编译环境:CentOs 7.1 Ubuntu 12.0.4 都可以 交叉编译工具:gcc -4.3.2 (博创6410平台) 问题描述:执行make menuconfig命令的时候,提示Makefil ...
- php调用一个c语言写的接口问题
用php调用一个c语言写的soap接口时,遇到一个问题:不管提交的数据正确与否,都无法请求到接口 1.用php标准的soap接口去请求 2.拼接xml数据去请求 以上两种方式都不正确 解决办法:php ...
- WDR7500 花生壳问题
新进一WDR7500 居然不能解析花生壳. 百度一番, 发现别人有同样的问题. 找来找去从别人的只言片语中发现需要升级固件. 好不容易加入一个群, 把固件下下来. 升级固件, 重新设置, 解析成功. ...
- REST实战:SeverClient项目+RESTful理论
理解一个新的技术,无疑就是使用它了,下面我们就通过一个可执行的demo来展现REST的原理和使用. 一 Demo 1.1 服务器端 1 主程序MainServer.java负责启动一个REST服务组件 ...
- wex5 教程 之 图文讲解 登陆,注册,页面跳转
视频教程地址:http://v.youku.com/v_show/id_XMTc3OTE0Nzg0NA==.html 效果预览: 登陆页面 首页用windowContainer装载 注册页面 登陆 ...
- java Jsoup 抓取页面数据
List<ImageBean> imgList = new ArrayList<ImageBean>(); ImageBean image = null; String ima ...
- java ftp下载文件
1.使用官方正规的jar commons-net-1.4.1.jar jakarta-oro-2.0.8.jar 注意:使用ftp从windows服务器下载文件和从linux服务器下载文件不一样 2. ...