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

我想如果通过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值