### 回答1：
可以通过v-model指令来
绑定select元素的选中
值，例如：
```
<template>
<div>
<
select v-model="
selected">
<option value="option1">
选项1</option>
<option value="option2">
选项2</option>
<option value="option3">
选项3</option>
</
select>
<button @click="show
Selected">显示选中
值</button>
</div>
</template>
<script>
export default {
data() {
return {
selected: '' //
默认选中
值为空
}
},
methods: {
show
Selected() {
console.log(this.
selected) // 输出选中的
值
}
}
}
</script>
```
在上面的代码中，我们通过v-model指令将
select元素的选中
值绑定到了组件的data属性中的
selected变量上。当用户选择了某个
选项时，
selected变量的
值会自动更新。我们可以通过show
Selected方法来
获取选中的
值并进行处理。
### 回答2：
在Vue中
获取select选中的option有多种方法，这里介绍两种比较简单的方法。
第一种方法是使用v-model指令，将
select的选中项
绑定到Vue组件中的一个变量上。具体来说，在
select标签中添加v-model属性，同时在Vue组件中定义一个与v-model属性相同的变量。
例如，如果我们有一个
select标签如下：
```html
<
select v-model="
selectedOption">
<option value="1">
选项1</option>
<option value="2">
选项2</option>
<option value="3">
选项3</option>
</
select>
```
那么在Vue组件中可以这样定义一个名为
selectedOption的data属性：
```js
data() {
return {
selectedOption: ''
}
}
```
此时，
selectedOption的
值会随着用户在
select中选中的项而
改变。
第二种方法是通过
事件监听来
获取select的选中项。具体来说，可以在
select标签上添加change
事件监听器，在
事件处理函数中
获取当前选中的option的value
值。
例如，我们有一个
select标签如下：
```html
<
select @change="handleChange">
<option value="1">
选项1</option>
<option value="2">
选项2</option>
<option value="3">
选项3</option>
</
select>
```
那么在Vue组件中定义一个名为handleChange的函数，用来处理
select的change
事件：
```js
methods: {
handleChange(event) {
const
selectedOption = event.target.value
// do something with
selectedOption
}
}
```
在handleChange函数中，可以通过event.target.value来
获取当前选中的option的value
值。
以上两种方法都可以
获取select选中的option，具体选择哪种取决于实际需求。V-model更加简单直接，而
事件监听更加灵活可定制。
### 回答3：
在Vue中
获取Select选中的Option有多种方式。
1.使用v-model指令
通过在
select标签中使用v-model指令可以实现双向数据
绑定。那么在vue组件中，在data中定义一个变量，通过v-model指令使
select选中的option的value
值绑定到这个变量上。这样
select选中的option的
值就可以在组件的其他地方使用了。
2.使用ref属性
在
select标签加上ref属性，并在Vue组件中通过this.$refs
获取对应的DOM元素。可以通过
获取这个DOM元素的value属性
获取当前选中的option的value
值。如下面的代码所示：
```
<template>
<div>
<
select ref="my
Select">
<option value="1">
选项1</option>
<option value="2">
选项2</option>
<option value="3">
选项3</option>
<option value="4">
选项4</option>
</
select>
<button @click="getValue">
获取选中的Option</button>
</div>
</template>
<script>
export default {
methods: {
getValue() {
const value = this.$refs.my
Select.value;
console.log(value);
},
}
}
</script>
```
3.监听change
事件
在
select标签中添加change
事件监听函数。当选中的option
值发生变化时，这个函数会被自动调用，并传入一个event对象。通过这个event对象的target属性，可以
获取到
当前选中的option标签，从而
获取到对应的value
值。如下面的代码所示：
```
<template>
<div>
<
select @change="
onChange">
<option value="1">
选项1</option>
<option value="2">
选项2</option>
<option value="3">
选项3</option>
<option value="4">
选项4</option>
</
select>
</div>
</template>
<script>
export default {
methods: {
onChange(event) {
const value = event.target.value;
console.log(value);
},
}
}
</script>
```
以上三种方法可以在Vue中
获取select选中的option。具体使用哪种方法可以根据项目需求来选择。
本文介绍了一个使用jQuery操作下拉框的选择器示例，包括获取当前选中项的值和标签、设置默认选中项、绑定下拉框的onchange事件并输出选中值。通过这些操作，读者可以了解如何利用jQuery简化常见的DOM操作。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
