获取select中所选中option值和value

<select id="products">
  <option value ="1">product1</option>
    <option value ="2">product2</option>
</select>

//根据select的id获取对象
var objs= document.getElementById("products");
//获取选中项的索引
var index = objs.selectedIndex;
//获取选中项的text值
var text= objs.options[index].text;
//获取option里的value
var val = document.getElementById("products").value
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
获取ElSelect组件中选中的label和value,可以通过以下步骤实现: 1. 获取ElSelect组件的实例:在Vue组件中,可以通过refs获取组件实例。例如,如果你给ElSelect组件定义了ref="mySelect",那么可以通过this.$refs.mySelect获取组件实例。 2. 获取选中项的索引:可以通过this.$refs.mySelect.currentLabel获取当前选中项的label,通过this.$refs.mySelect.currentValue获取当前选中项的value。 3. 获取选中项的内容:如果想要获取选中项的其他内容,可以通过this.$refs.mySelect.options获取所有选项的数组,然后遍历数组查找匹配的选项。 以下是一个示例代码: ```html <template> <el-select v-model="selected" ref="mySelect"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </template> <script> export default { data() { return { selected: '', options: [ { label: '选项1', value: '1' }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' } ] } }, mounted() { console.log('当前选中项的label:', this.$refs.mySelect.currentLabel) console.log('当前选中项的value:', this.$refs.mySelect.currentValue) } } </script> ``` 在mounted钩子函数中,可以获取到当前选中项的label和value。如果需要在选中项发生变化时获取,可以在ElSelect组件上监听change事件。例如: ```html <template> <el-select v-model="selected" ref="mySelect" @change="handleChange"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </template> <script> export default { data() { return { selected: '', options: [ { label: '选项1', value: '1' }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' } ] } }, methods: { handleChange() { console.log('当前选中项的label:', this.$refs.mySelect.currentLabel) console.log('当前选中项的value:', this.$refs.mySelect.currentValue) } } } </script> ``` 在handleChange方法中,可以获取到当前选中项的label和value,并且它们会在选中项发生变化时被更新。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值