<!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
时间： 2024-10-06 14:17:34