原生js获取select的option选项的value值和text值

来源:网络 文章列表 2018-11-20 8
我想如果通过jQuery的话,要获取select的option选项的value值或者text值对于你来说肯定非常简单,今天小编就给他就介绍下原生javascript操作select的方法。

我想如果通过jQuery的话,要获取select的option选项的value值或者text值对于你来说肯定非常简单,今天小编就给他就介绍下原生javascript操作select的方法。

有如下 select 

<select onchange="test()" id="newsType">
   <option value="1">通知</option>
   <option value="2">新闻一览</option>
   <option value="3">活动</option>
</select>

js 代码如下:

function test(){
  var myselect= document.getElementById('newsType');   //获取select的dom
  var index = myselect.selectedIndex;                  //获取选中的index
  var text  = myselect.options[index].text;            //获取标签值
  var value = myselect.options[index].value;           //获取value值 
  ...
}
javascript原生的方法总结:
1: 拿到select对象: var myselect= document.getElementById("newsType");
2:拿到选中项的索引:var index = myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index
3: 拿到选中项options的value: myselect.options[index].value;
4: 拿到选中项options的text:  myselect.options[index].text;

 

下面介绍下jQuery获取option选项的方法

第一种方式:

$('#newsType option:selected').text();  //选中的文本
$('#newsType option:selected').val();   //选中的值

第二种方式

$("#newsType").find("option:selected").text(); // 获取文本
$("#newsType").find("option:selected").val();  // 获取option的value值

 

腾讯云限量秒杀

1核2G 5M 50元/年 2核4G 8M 74元/年 4核8G 5M 818元/年 CDN流量包 100GB 9元

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论

友情链接