现在有一个Id为AreaId的下拉框,要获取它当前选择项的文本和值有以下方法:

<span class="red">* </span>
地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区:
<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获取下拉框当前选择项的文本和值的更多相关文章

  1. Js获取下拉框选定项的值和文本

    Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...

  2. 原生js获取下拉框下标

    // 获取下拉框所选下标 传入下拉框的id function getselectscheckitemindex (idStr) { let o = document.getElementById(id ...

  3. js总结:利用js获取下拉框的value值和文本值

    select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛.但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的. html代码: ...

  4. js获取下拉框的值

      获取select 选中的option的值: $("#ddlRegType").find("option:selected").val(); 获取select ...

  5. Js获取下拉框的值和文本select

    $("#camera").change(function () {        var obj = this;        $("#camera_Name" ...

  6. js获取下拉框当前选中的值并弹出

    this.options[this.selectedIndex].value --- 显示文本 this.value --- 实际存储值 调用实例: <script language=" ...

  7. js 获取 下拉框的值

    //错误 console.log($("#DictID").select.val()); //错误 console.log($("#DictID").selec ...

  8. js获取下拉框的value值

    var Resultstr=""; var param = { action: "MoneyList" };//参数拼接 $.ajax({ type: &quo ...

  9. js,jquery获取下拉框选中的option

    js获取select选中的值: var sel=document.getElementById("select1"); var index = sel.selectedIndex; ...

随机推荐

  1. 将数据文件从asm移到普通文件系统

    数据库可以关闭的场景: 1.关闭并重新mount数据库 $ sqlplus '/as sysdba' SQL> shutdown immediate; SQL> startup mount ...

  2. 微信sdk分享,苹果手机分享到qq好友和qq空间没有反应

    最近线上程序苹果手机进行微信分享时,分享到qq好友和qq空间,无法调用分享程序,从微信跳转到qq后就没有反应了,但是安卓手机分享就没事? 解决:调用微信sdk分享时,分享的url(link)的参数不能 ...

  3. wampserver-----------如何设置wampserver在windows下开机自动启动。

    虽然很简单,但是还是做个记录.我的习惯,还是看图: 到你电脑的服务里面找到这两项然后点击右键属性,设置为自动.

  4. jQ HTML之捕获 设置 元素添加与删除

    捕获 设置修改 添加元素 删除元素

  5. .NET学习记录3

    一.ASP.NET ISAPI与IIS IIS如何监听来自外界的http request ,如何根据ISAPI Extension Maping 将对于不同的resource的请求分发给不同的ISAP ...

  6. Java语言的特点

    一. 面向对象:其实是现实世界模型的自然延伸.现实世界中任何实体都可以看作是对象.对象之间通过消息相互作用.另外,现实世界中任何实体都可归属于某类事物,任何对象都是某一类事物的实例.如果说传统的过程式 ...

  7. [Effective JavaScript 笔记]第64条:对异步循环使用递归

    假设需要有这样一个函数,接收一个URL的数组并尝试依次下载每个文件直到有一个文件被成功下载.如果API是同步的,使用循环很简单实现. function downloadOneSync(urls){ f ...

  8. org.apache.hadoop.security.AccessControlException: Permission denied:

    org.apache.hadoop.security.AccessControlException: Permission denied: user=xxj, access=WRITE, inode= ...

  9. s3c2440 移值u-boot-2016.03 第4篇 支持NAND flash 识别

    1, /include/configs/smdk2440.h 中添加 #define CONFIG_CMD_NAND 编译 drivers/mtd/nand/built-in.o: In functi ...

  10. HTML5 属性 认知

    HTML5中 不支持  Html4.01的属性: <acronym> <applet> <basefont> <big> <center> ...