获取seleect下选中option的属性值

最新推荐文章于 2022-09-09 22:48:42 发布

weixin_30735391

最新推荐文章于 2022-09-09 22:48:42 发布

阅读量280

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/uyi777/p/6935142.html

本文介绍如何使用Vue.js处理Select元素的选择事件，包括通过selectedOptions和selectedIndex获取被选中项的值和文本。同时提供了JavaScript原生方法及jQuery方法来实现相同的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>