How To Get Selected Option Text In Vue JS ?

Vue · 16-Mar-2021

Hi Guys,

Today, I will learn you how to get selected option text in vue js. We will show example of vue js get selected option text. i will give you simple example of get the text of the selected option using vue.js.

we can easily get selected text value of dropdown in vue js. i give you bellow full example of getting selected option text and value in vuejs.

I will take a simple dropdown with some options like laravel, php, codeigniter, etc. when you select it. we will get selected option text and value using on change event value vue js.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Vue JS Get Selected Option Text Example - nicesnippets.com</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

    
<div id="app">

    
  <select name="category_id" @change="onChange($event)" class="form-control">
     <option>--- Select Category ---</option>
     <option value="1">Dharmik</option>
     <option value="2">Hardik</option>
     <option value="3">Mehul</option>
     <option value="4">Piyush</option>
     <option value="5">Keval</option>
  </select>

    
</div>

    
<script type="text/javascript">

    
    var app = new Vue({
      el: '#app',
      methods: {
          onChange(event) {
              var optionValue = event.target.value;
              var optionText = event.target.options[event.target.options.selectedIndex].text;

              
              console.log(optionText);
              console.log(optionValue);
          }
      }
    })

    
</script>

     
</body>
</html>

It will help you...