如何使用vuejs获取所选选项的文本?

JavaScript

小卤蛋Pro

2020-03-12

我想获取选定选项输入的文本并将其显示在其他位置。我知道如何使用jQuery,但我想知道如何使用Vuejs。

这是我们在jQuery中的操作方式。我的意思是“选定选项”的文本不是值。

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?

第1192篇《如何使用vuejs获取所选选项的文本?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

5个回答
猪猪Mandy 2020.03.12

在模板之外,我可以像下面这样访问选项的名称:

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>

options使用v:for以下命令加载到模板中<option v-for="option in options" v-bind:value="option.value">{{option.name}}</option>

@change="getOptionName"select元素使用

<select @change="getOptionName">

在您methods的名字中:

getOptionName(event){ let option_name = this.options[event.target.options.selectedIndex].name }

请注意,在这种情况下,object optionsin event.target.options与您命名为options... 的数据没有任何关系,希望可以避免造成混淆

因此,这是一种更高级的方法,但是我相信,只要正确设置所有名称,尽管可能会更容易,但获取名称并不可怕。

LEYEvaL 2020.03.12

我认为这里的一些答案有点太复杂了,因此我想提供一个更简单的解决方案。我将仅在示例中使用事件处理程序,而忽略诸如模型绑定之类的内容。

<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
    }
}
...
达蒙阿飞斯丁 2020.03.12

您可以在以下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/

Itachi蛋蛋 2020.03.12

假设您的模型上有一个customers列表和一个选定的对象customer,则如下所示的示例应该可以正常工作:

<select v-model="theCustomer">
    <option :value="customer" v-for="customer in customers">{{customer.name}}</option>
</select>
<h1>{{theCustomer.title}} {{theCustomer.name}}</h1>
小哥Tony 2020.03.12

我尝试使用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和名称值

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android