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

Question

I want to get the text of the selected input option and display it somewhere else. I know how to do it with jQuery, but I want to know how to do it with Vuejs.

Here's how we do it in jQuery. I mean the text of the selected option, not the value.

var mytext = $("#customerName option:selected").text(); 

Here is my HTML

  <select name="customerName" id=""> <option value="1">Jan</option> <option value="2">Doe</option> <option value="3">Khan</option> </select> {{customerName}} 

Now, how can I display the selected option below it. like yang, dow, han?

Answer 1

I had this problem when I needed to get the data attribute from the selected option, here is how I handled it:

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

and in Vue's methods:

 methods: { handleChange(e) { if(e.target.options.selectedIndex > -1) { console.log(e.target.options[e.target.options.selectedIndex].dataset.foo) } } } 

But you can change it to get innerText or something else. If you use jQuery, you can be a little shorter than $(e).find(':selected').data('foo') or $(e).find(':selected').text() .

If you bind the model to the select element, it will return the value (if it is set) or the contents of the option if the value is not set (as when sending the form).

** EDIT **

I would say that @MrMojoRisin's answer is a more elegant way to solve this problem.

Answer 2

Instead of defining the value as an identifier only, you can associate the selected value with an object with two attributes: value and text. For example with products:

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

Then you can access the text through the "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 3

I think your values ​​should be in JS. Then you can easily manipulate it. Just adding:

 data: { selected: 0, options: ['Jan', 'Doe', 'Khan'] } 

Your markup will be cleaner:

 <select v-model="selected"> <option v-for="option in options" value="{{$index}}">{{option}}</option> </select> <br> <span>Selected: {{options[selected]}}</span> 

Here is the JSFiddle update

As th1rdey3 pointed out, you can use complex data, and the values ​​could not be just arrays. However, you can use the object key instead. Here is the implementation .

Answer 4

You can use the Cohars style, or you can also use methods. Data is stored in the options variable. The showText method detects the text of the selected values ​​and returns it. One of the advantages is that you can save the text to another variable, for example. 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 showing demo

Answer 5

Assuming you have a customer list and a selected customer on your model, the example below should work perfectly:

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

Answer 6

You can find this in the Vue documentation here: http://vuejs.org/guide/forms.html#Select

Using v-model:

 <select v-model="selected"> <option selected>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected }}</span> 

In your case, I think you should do:

 <select name="customerName" id="" v-model="selected"> <option>Jan</option> <option>Doe</option> <option>Khan</option> </select> {{selected}} 

Here is a working fiddle: https://jsfiddle.net/bqyfzbq2/

Answer 7

Outside of the template, I access the parameter name, for example:

let option_name = this.options[event.target.options.selectedIndex].name

To do this, use this approach to customize your template:

Your parameters are defined in an array like [{"name":"Bar","value":1},{"name":"Baz","value":2}] ... etc.

Put your parameters in the data function of the <script>export default {function data(){return { options }}}</script>

Load options into the template using v:for : <option v-for="option in options" v-bind:value="option.value">{{option.name}}</option>

Use @change="getOptionName" in the select element:

<select @change="getOptionName">

In your methods get the name:

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

Please note that in this case, the object options in event.target.options has nothing to do with your data named options ... hope this avoids confusion

So, a more advanced approach, but I think that when everything is set up correctly, getting a name is not scary, although it may be easier.

Answer 8

The code below worked to get the text from the selected option. I added v-on: change , which calls the onChange () function for the select element.

 methods:{ onChange: function(e){ var id = e.target.value; var name = e.target.options[e.target.options.selectedIndex].text; }, <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

I think some of the answers here are a bit complicated, so I would like to offer an easier solution. I am only going to use the event handler in the example and not take into account such things as model binding, etc.

 <select @change="yourCustomMethod"> <option value="1">One</option> <option value="2">Two</option> </select> 

Then in your Vue instance:

 ... methods: { yourCustomMethod: function(event) { var key = event.target.value, // example: 1 value = event.target.textContent; // example: One } } ...