检索选择元素的文本

Posted 2023-02-22

【中文标题】检索选择元素的文本

【英文标题】：Retrieving text of select element

【发布时间】：2015-08-05 07:41:48

【问题描述】：

当使用 vue.js 的 v-model 绑定 <select> 元素时，您将如何获取选定的选项文本而不是选定的选项值？

在 html 中：

<select v-model="selected" options="myOptions"></select>

在 JS 中：

myOptions: [ text: 'Blue', value: '1' ,  text: 'Green', value: '2' ]

我想要通过执行 selected.text 或 selected.value 之类的操作来检索文本“Blue”以及值“1”。但是，您只能执行 selected ，默认返回所选值。

参考：Vue.js guide for Dynamic Select Options

【问题讨论】：

我现在遇到了完全相同的问题。该文档似乎暗示您可以通过text 获取您所描述的方式，但这对我也不起作用。

根据 Even You 的说法，这还没有内置到 vue.js 中：github.com/vuejs/Discussion/issues/163#issuecomment-104966694

【参考方案1】：

你可以只使用一个过滤器，像这样：

html:

<div id='vm'>
    Formatted value:<b> city | cityFormatter </b><br/>
    <br/>
    <select v-model="city" options="cities"></select>
</div>

js:

var vm = new Vue(
  el: '#vm',
  data: 
      city: 'city1',
      cities: [text: 'Toronto', value: 'city1', 
               text: 'Orleans', value: 'city2']
  ,
  filters: 
      cityFormatter: function(val) 
          var newVal = '';
          this.cities.map(function(el) 
              if (val == el.value)
                  newVal = el.value + ' ' + el.text;
              
          );
          return newVal;
      
  
);

工作示例： http://jsfiddle.net/qfy6s9Lj/9/

【参考方案2】：

其实你可以试试结合jquery或者只是原生js代码

jQuery 的解决方案

html:

<div id='example'>
     <select v-model="selected" options="myOptions"></select>
</div>

js:

var vm = new Vue(
  el: '#example',
  data: 
      ...
  ,
   computed: 
        selectedtext:  
            cache: false,
            //get selectedtext by jquery
            get: function() return $(this.$el).find(":selected").text();
        
    ,
);

没有jquery的解决方案

html:

<div id='example'>
     <select ref="ddl" v-model="selected" options="myOptions"></select>
</div>

js:

var vm = new Vue(
  el: '#example',
  data: 
      ...
  ,
   computed: 
        selectedtext:  
            cache: false,
            //get selectedtext directly
            get: function() 
                 var ddl = this.$refs.ddl;
                 return ddl.options[ddl.selectedIndex].text;
            
        
    ,
);

此外，您还可以创建一个逻辑复用组件，达到通过 selected.text 或 selected.value 访问所选值的目的。

【讨论】：

我们仍然需要从选定的选项中获取文本吗？我使用 vue 作为 jquery 的替代品。真的很糟糕:(

我认为你可以用原生 javascript 代码替换 jquery 代码。这取决于你选择什么。此外，我认为还有其他解决方案。

【参考方案3】：

Vue 2+ 的答案

我有兴趣遇到这个问题，因为我目前正在评估 Vue 和 React，并研究获取当前选择的相对容易程度（不仅仅是下拉菜单，而是一般的 UI）。

我发现，自 2015 年 5 月至 2015 年 7 月发布这些帖子以来，情况发生了很大变化，当时 Vue 的最新版本是 0.12。 @swift 的答案中的 JSFiddle 今天仍然有效，因为它引入了 Vue 0.12。

使用今天的 Vue，目前是 2.6 版，我找到了一个与今天面临同样问题的人相关的解决方案。有趣的是，使用 2.6，讨论中的标记甚至不会达到初始化选项的程度：

<select v-model="selected" options="myOptions"></select>

在深入研究之后，我发现虽然options 是select 元素的有效HTML DOM 属性，因此可以从JavaScript 访问，但似乎Vue 不再支持像这样在标记中初始化它。相反，我们添加了传统的 HTML option 元素。每https://vuejs.org/v2/guide/forms.html：

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected:  selected </span>

乍一看，这种变化似乎是倒退了一步。但事实上，记住我们可以使用v-for 和v-bind，我认为这让事情变得更加灵活。为了说明我为什么这么认为，我将首先展示在同一链接页面上给出的示例：

HTML

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
     option.text 
  </option>
</select>

<span>Selected:  selected </span>

JS

new Vue(
  el: '...',
  data: 
    selected: 'A',
    options: [
       text: 'One', value: 'A' ,
           text: 'Two', value: 'B' ,
           text: 'Three', value: 'C' 
        ]
      
    )

在 HTML 中可以看到，这将下拉列表的选定值绑定到 Vue 实例的 selected 属性（使用 v-model="selected"），将单个选项值绑定到每个选项的 value（使用 @ 987654334@），最后将各个选项文本绑定到将要显示的文本（使用 option.text ）。

将selected 绑定到不同的选项属性只是进一步的一小步，可以是文本、id 或选项对象可能具有的任何属性，或者——这就是事情——绑定到选项对象本身。能够将选项本身作为选定值访问意味着我们可以访问它的所有属性，而不仅仅是我们选择绑定到的属性：

HTML

<div id='vm'>
    <select id="ddl1" v-model="ddl1selecteditem">
        <option v-for="option in options1" v-bind:value="option">
             option.txt 
        </option>
    </select>
    <span>selected item: text=' ddl1selecteditem.txt ', id= ddl1selecteditem.id </span>
</div> 

JS

var vm = new Vue(
  el: '#vm',
  data: 
    options1: [
       txt: 'One', id: 1 ,
       txt: 'Two', id: 2 ,
       txt: 'Three', id: 3
    ],
    ddl1selecteditem: 
    
);

vm.ddl1selecteditem = vm.options1[0];