获取seleect下选中option的属性值

<!DOCTYPE html>
<html>
<head>
    <title></title>
        <script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
</head>
<body>
<div id="app">
  <select v-model="value" placeholder="请选择" @change="handlueCahnge">
    <option v-for="(item, index) in options" :label="item.label" :value="item.value" :other="item.label" :data-love="item.id">
    </option>
  </select>
</div>
<script type="text/javascript">
    var vm = new Vue({
  el: "#app",
  data: {
    options: [{
        id:"1",
      value: '选项1',
      label: '黄金糕'
    }, {
        id:"2",
      value: '选项2',
      label: '双皮奶'
    }, {
        id:"3",
      value: '选项3',
      label: '蚵仔煎'
    }, {
        id:"4",
      value: '选项4',
      label: '龙须面'
    }, {
        id:"5",
      value: '选项5',
      label: '北京烤鸭'
    }],
    value: ''
  },
  methods: {
    handlueCahnge(e) {

      console.log(e)
      console.log(e.target)
      console.log(e.target.value)

      console.log(e.target.selectedOptions[0].dataset.love)                    //都可以
      console.log(e.target.selectedOptions[0].getAttribute("data-love") )       //
　　　var a=e.target.selectedIndex
      console.log(e.target.options[a].dataset.love)
  }
}
})
</script>
</body>
</html>

主要用到 selectedOptions 和 selectedIndex 2种方法，看代码即可明白。

另转载：

如何获得select被选中option的value和text

 

一：JavaScript原生的方法

1:拿到select对象： var myselect=document.getElementById(“test”);

2：拿到选中项的索引：var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index

3:拿到选中项options的value： myselect.options[index].value;

4:拿到选中项options的text： myselect.options[index].text;

二：jQuery方法（前提是已经加载了jquery库）

1:var options=$(“#test option:selected”); //获取选中的项

2:alert(options.val()); //拿到选中项的值

3:alert(options.text()); //拿到选中项的文本

参考链接：http://www.cnblogs.com/zhaokuojiao/p/6055632.html