Question

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

Answer 1

您可以将选定的值与具有两个属性的对象绑定，而不是仅将值定义为id：value和text。例如产品：

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

然后，您可以通过＆＃34;值＆＃34;：

访问该文本

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

Working example

＆＃13;

var app = new Vue({
  el: '#app',
  data: {
  	selected: '',
    products: [
      {id: 1, name: 'A'},
      {id: 2, name: 'B'},
      {id: 3, name: 'C'}
    ]
  }
})

＆＃13;

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

＆＃13;

Answer 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给出的答案是一种更优雅的解决方法。

Answer 3

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

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

Answer 5

假设您的模型上有客户列表和选定的客户，下面的示例应该是完美的：

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

Answer 6

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

Answer 7

在模板之外，我访问选项的名称，如下所示：

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中的options event.target.options与您的options数据没有任何关系...希望这样可以避免混淆

这是一种更先进的方法，但我相信当它全部设置正确时，名称并不可怕，虽然它可能更容易。

Answer 8

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

Answer 9

我试图使用MrMojoRisin的以下建议

v-bind:value="{ id: product.id, text: product.name }"

但是对我来说，这导致将对象的 toString（）表示形式分配给值，即 [对象对象]

我在代码中所做的是在绑定到该值的相似对象上调用 JSON.stringify ：

v-bind:value="JSON.stringify({id: lookup[lookupIdFields[detailsSection]], name: lookup.Name})"

然后，我当然可以使用 JSON.parse 将其转换回对象，并从结果中获取必需的ID和名称值

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

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

10 个答案: