我想获取所选选项输入的文本并将其显示在其他地方。我知道如何使用 jQuery 来做到这一点，但我想知道我们如何使用 Vuejs 来做到这一点。
这是我们在 jQuery 中的做法。我的意思是 Selected Option 的文本而不是值。
var mytext = $("#customerName option:selected").text();
这是我的 HTML
<select name="customerName" id="">
<option value="1">Jan</option>
<option value="2">Doe</option>
<option value="3">Khan</option>
</select>
{{customerName}}
现在我如何在它下面显示选定的选项。像 Jan、Doe、Khan？
【问题讨论】：
标签： javascript vue.js
您可以将选定的值与具有两个属性的对象绑定，而不是将值仅定义为 id：值和文本。 以产品为例：
<div id="app">
<select v-model="selected">
<option v-for="product in products" v-bind:value="{ id: product.id, text: product.name }">
{{ product.name }}
</option>
</select>
</div>
然后就可以通过“值”来访问文本了：
<h1>Value:
{{selected.id}}
</h1>
<h1>Text:
{{selected.text}}
</h1>
var app = new Vue({
el: '#app',
data: {
selected: '',
products: [
{id: 1, name: 'A'},
{id: 2, name: 'B'},
{id: 3, name: 'C'}
]
}
})<div id="app">
<select v-model="selected">
<option v-for="product in products" v-bind:value="{ id: product.id, text: product.name }">{{ product.name }}
</option>
</select>
<h1>Value:
{{selected.id}}
</h1>
<h1>Text:
{{selected.text}}
</h1>
</div>
<script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>【讨论】：
[object Object] 指定为我的值
我遇到了这个问题，我需要从选定的选项中获取数据属性，这就是我的处理方式：
<select @change="handleChange">
<option value="1" data-foo="bar123">Bar</option>
<option value="2" data-foo="baz456">Baz</option>
<option value="3" data-foo="fiz789">Fiz</option>
</select>
在 Vue 方法中：
methods: {
handleChange(e) {
if(e.target.options.selectedIndex > -1) {
console.log(e.target.options[e.target.options.selectedIndex].dataset.foo)
}
}
}
但是您可以将其更改为获取innerText 或其他任何内容。如果您使用 jQuery，您可以将 $(e).find(':selected').data('foo') 或 $(e).find(':selected').text() 缩短一点。
如果您将模型绑定到 select 元素，它只会返回值（如果已设置）或在未设置值时返回选项的内容（就像在提交表单时一样）。
** 编辑 **
我想说@MrMojoRisin 给出的答案是解决这个问题的一种更优雅的方式。
【讨论】：
以下代码用于从所选选项中获取文本。我添加了一个 v-on:change ，它调用一个函数 onChange() 到选择元素。
methods:{
onChange: function(e){
var id = e.target.value;
var name = e.target.options[e.target.options.selectedIndex].text;
console.log('id ',id );
console.log('name ',name );
},
<select name="customerName" id="" v-on:change="onChangeSite($event)">
<option value="1">Jan</option>
<option value="2">Doe</option>
<option value="3">Khan</option>
</select>
【讨论】：
假设您的模型上有一个customers 列表和一个选定的customer，下面的示例应该可以完美运行：
<select v-model="theCustomer">
<option :value="customer" v-for="customer in customers">{{customer.name}}</option>
</select>
<h1>{{theCustomer.title}} {{theCustomer.name}}</h1>
【讨论】：
我猜你的值应该在 JS 中。然后你可以很容易地操纵它。只需添加：
data: {
selected: 0,
options: ['Jan', 'Doe', 'Khan']
}
你的标记会更干净：
<select v-model="selected">
<option v-for="option in options" value="{{$index}}">{{option}}</option>
</select>
<br>
<span>Selected: {{options[selected]}}</span>
正如 th1rdey3 所指出的，您可能想要使用复杂的数据和值，而不仅仅是数组的索引。您仍然可以使用和对象键而不是索引。 Here is the implementation.
【讨论】：
您可以使用 Cohars 样式，也可以使用方法。数据保存在options 变量中。 showText 方法找出选定的值文本并将其返回。一个好处是您可以将文本保存到另一个变量，例如selectedText
HTML：
<div id='app'>
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<br>
<span>Selected: {{ showText(selected) }}</span>
</div>
JAVASCRIPT：
var vm = new Vue({
el: '#app',
data: {
selected: 'A',
selectedText: '',
options: [{
text: 'One',
value: 'A'
}, {
text: 'Two',
value: 'B'
}, {
text: 'Three',
value: 'C'
}]
},
methods: {
showText: function(val) {
for (var i = 0; i < this.options.length; i++) {
if (this.options[i].value === val){
this.selectedText = this.options[i].text;
return this.options[i].text;
}
}
return '';
}
}
});
JSFiddle 显示 demo
【讨论】：
{{options(selected)}}
我尝试使用MrMojoRisin的以下建议
v-bind:value="{ id: product.id, text: product.name }"
但是对我来说，这导致该对象的 toString() 表示被分配给值，即 [object Object]
我在代码中所做的是在绑定到该值的类似对象上调用 JSON.stringify：
v-bind:value="JSON.stringify({id: lookup[lookupIdFields[detailsSection]], name: lookup.Name})"
当然，我可以使用 JSON.parse 将其转换回对象，并从结果中获取必要的 id 和 name 值
【讨论】：
在模板之外，我可以像这样访问选项的名称：
let option_name = this.options[event.target.options.selectedIndex].name
为此，请采用以下方法设置您的模板：
在数组中定义您的选项，例如
[{"name":"Bar","value":1},{"name":"Baz","value":2}] ...等
将您的选项放在组件的data 函数中
<script>export default {function data(){return { options }}}</script>
使用v:for在模板中加载options：
<option v-for="option in options" v-bind:value="option.value">{{option.name}}</option>
在select 元素上使用@change="getOptionName"：
<select @change="getOptionName">
在您的methods 中获取名称：
getOptionName(event){ let option_name = this.options[event.target.options.selectedIndex].name }
请注意，在这种情况下，event.target.options 中的 object options 与您名为 options 的数据没有任何关系......希望这能避免混淆
所以是一种更高级的方法，但我相信当一切设置正确时，获得名称并不可怕，尽管它可能更容易。
【讨论】：
您可以在此处的 Vue 文档中找到它：http://vuejs.org/guide/forms.html#Select
使用 v-model ：
<select v-model="selected">
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
在你的情况下，我想你应该这样做：
<select name="customerName" id="" v-model="selected">
<option>Jan</option>
<option>Doe</option>
<option>Khan</option>
</select>
{{selected}}
这是一个工作小提琴：https://jsfiddle.net/bqyfzbq2/
【讨论】：
我认为这里的一些答案有点过于复杂，所以我想提供一个更简单的解决方案。我将只在示例中使用事件处理程序，并省略模型绑定等内容。
<select @change="yourCustomMethod">
<option value="1">One</option>
<option value="2">Two</option>
</select>
然后在你的 Vue 实例中：
...
methods: {
yourCustomMethod: function(event) {
var key = event.target.value, // example: 1
value = event.target.textContent; // example: One
}
}
...
【讨论】：