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值

Logo

前往低代码交流专区

更多推荐