Vue如何获得select被选中option的value和text
template:<select id="select" v-model="selected" ><option v-for="option in options" v-bind:value="option.value">{{ option.text }} + {{option.url}}</option></select>&l...
template:
<select id="select" v-model="selected" >
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }} + {{option.url}}
</option>
</select>
<span>Selected: {{ selected }}</span>
script:
data: {
selected: 'A',//select选中的值
options: [
{ text: 'One', value: 'A', url:'http://www.baidu.com'},
{ text: 'Two', value: 'B', url:'http://www.qq.com'},
{ text: 'Three', value: 'C', url:'http://www.xxx.com'}
]
}
最后,data里面的selected就是被选中的value值,可以直接拿来使用
二、获取被选中的text
此处我用的原生JavaScript方法,如下:
1:拿到select对象: var myselect=document.getElementById(“select”);
2:拿到选中项的索引:var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index
3:拿到选中项options的value:myselect.options[index].value;
4:拿到选中项options的text: myselect.options[index].text;
5:拿到选中项的其他值,比如这里的url: myselect.options[index].getAttribute(‘url’);
jQuery方法:
1:var options=$(“#select option:selected”); //获取选中的项
2:alert(options.val()); //拿到选中项的值
3:alert(options.text()); //拿到选中项的文本
4:alert(options.attr(‘url’)); //拿到选中项的url值
更多推荐
所有评论(0)