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

Posted 2023-02-16

【中文标题】如何使用 vuejs 获取所选选项的文本？

【英文标题】：How to get the text of the selected option using vuejs?

【发布时间】：2016-06-15 08:40:34

【问题描述】：

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

【参考方案1】：

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

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>

【讨论】：

这只是将[object Object] 指定为我的值

【参考方案2】：

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

<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 给出的答案是解决这个问题的一种更优雅的方式。

【参考方案3】：

以下代码用于从所选选项中获取文本。我添加了一个 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>

【参考方案4】：

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

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

【参考方案5】：

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

【参考方案6】：

您可以使用 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

【讨论】：

将选项保留为简单数组并使用索引作为值更简单。除非该值需要是特定文本，但我没有看到它的用例。

如果需要，您可以将文本保存到另一个变量中

我这么说是因为如果你只使用索引，那么 showText() 方法是没有用的。你可以简单地显示options(selected)

如果您的数据很复杂（例如客户代码和客户名称），那么您不能使用索引。

是的，当然，这就是为什么我说“除非值需要是特定文本”。我仍然会使用一个更简单的对象，键是客户代码，值是客户名称。并使用 键显示信息。就这样：jsfiddle.net/wojdtzr1

【参考方案7】：

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

【参考方案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 的数据没有任何关系......希望这能避免混淆

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

【参考方案9】：

您可以在此处的 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/

【讨论】：

它正在选择值（1,2,3）。我想显示名字

你的例子没有价值，这就是为什么它显示字母 A、B 和 C。如果我们有 vaule 怎么办？

我也需要这些值

【参考方案10】：

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

<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
    

...

【讨论】：

这将返回整个选择中的所有文本选项，而不仅仅是选中的那个。