现在有一个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. box-flex不均分问题

    解决box-flex不均等分的问题 我想当你上手css3的时候后一定为他的强大而感到震惊,但是震惊之后带来的一定是苦恼,因为他太TM变态了! 我之所以这么说是因为我今天写box-flex的时候遇到了一 ...

  2. (一) ARM 内存SDRAM 讲解

    2.SDRAM内存工作原理 上面产生的误解关于 Bank ,这个bank 不是 和 S3C2440 芯片有关系(RAM 自身有bank , SDRAM 自身也有bank ,就像书 有 好几章节一样) ...

  3. paper 109 :图像处理中的拉普拉斯算子

    1.基本理论 拉普拉斯算子是最简单的各向同性微分算子,具有旋转不变性.一个二维图像函数 的拉普拉斯变换是各向同性的二阶导数,定义为:   为了更适合于数字图像处理,将该方程表示为离散形式:    另外 ...

  4. Excel应该这么玩——2、命名列:消除地址引用

    命名列:通过名称引用列,让公式更容易理解. 下面继续举上次的栗子. 1.历史遗留问题 之前虽然把数字编成了命名单元格,但其中还是有单元格地址B2.C2之类,要理解公式需要找到对应的列标题. 特别是像下 ...

  5. webservice调用服务端数据时给soapenv:Envelope 添加自定义的命名空间

    最近做第三方接口,服务端需要 <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/&qu ...

  6. Team Queue (uva540 队列模拟)

    Team Queue Queues and Priority Queues are data structures which are known to most computer scientist ...

  7. C++文本的读取和写入

    #include <iostream> #include <sstream> #include <fstream> #include <string> ...

  8. [问题2014A11] 复旦高等代数 I(14级)每周一题(第十三教学周)

    [问题2014A11]  设 \(n\) 阶方阵 \(A,B\) 满足: \((A+B)^2=A+B\), \(\mathrm{r}(A+B)=\mathrm{r}(A)+\mathrm{r}(B)\ ...

  9. ExtJs

    ExtJS是一种主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架.      概念 1.ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用 ...

  10. Android项目开发遇到的问题(64K的错误)的解决之路,从入坑到出坑

    自己一个android项目,一直以来进展还算顺利,没有遇到什么严重性的问题,今天准备给同事手机上安装一下玩玩,谁知丢人丢大,无法build apk!报错!my god,我开发没问题啊,我手机连上usb ...