如何使用vuejs获取选中选项的文本？

Question

我想获取所选选项输入的文本并将其显示在其他地方。我知道如何使用 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 一样？

Answer 1

您可以在此处的 Vue 文档中找到它：http://vuejs.org/guide/forms.html#Select

使用 v 模型：

<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}}

这是一个有效的 fiddle ：https://jsfiddle.net/bqyfzbq2/

Answer 2

我猜你的值应该在 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>

Here is the update JSFiddle

正如 th1rdey3 指出的那样，您可能想要使用复杂的数据，而值不能简单地是数组的索引。您仍然可以使用和对象键而不是索引。 Here is the implementation.

Answer 3

您可以使用 Cohars 风格，也可以使用方法。数据保存在 options 变量中。 showText 方法找出选定的值文本并 returns 它。一个好处是您可以将文本保存到另一个变量，例如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

Answer 4

我遇到了这个问题，我需要从 selected 选项中获取数据属性，我是这样处理的：

<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 元素，它只会 return 值（如果设置）或选项的内容，如果没有设置值（就像它会在提交表格时）。

** 编辑 **

我想说@MrMojoRisin 给出的答案是一种更优雅的解决方法。

Answer 5

我觉得这里的一些答案有点太复杂了，所以我想提供一个更简单的解决方案。我只打算在示例中使用事件处理程序，并省略模型绑定等内容。

<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
    }
}
...

Answer 6

假设您的模型有一个 customers 列表和一个选定的 customer，下面的示例应该很完美：

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

Answer 7

您可以将所选值与具有两个属性的对象绑定，而不是仅将值定义为 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>

然后就可以通过"value"访问正文了：

   <h1>Value:
     {{selected.id}}
   </h1>
   <h1>Text:
     {{selected.text}}
   </h1>

Working example

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>

Answer 8

在模板之外，我像这样访问选项的名称：

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 的数据没有任何关系……希望这样可以避免混淆

这是一种更高级的方法，但我相信当一切设置正确时，获取名称并不可怕，尽管它可能更容易。

Answer 9

下面的代码用于从 selected 选项中获取文本。我添加了一个 v-on:change ，它调用函数 onChange() 到 select 元素。

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>

Answer 10

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

如何使用vuejs获取选中选项的文本？

How to get the text of the selected option using vuejs?

javascript

vue.js