How to get the text of the selected option using Vue.js?

How to get the text of the selected option using Vue.js?

In Vue.js tutorial, we will learn how to get the text of the selected option using Vuejs. I will give you simple example of get the text of the selected option using Vue.js

In Vue JS, we will learn how to get text of selected option vue js on change event. I will give you simple example of get the text of the selected option using Vue.js.

Ưe 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.

In this example, we 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 - ItSolutionStuff.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">PHP</option>

     <option value="2">Laravel</option>

     <option value="3">Codeigniter</option>

     <option value="4">Vue JS</option>

     <option value="5">Angular JS</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>

I hope it can help you...

vue-js vuejs vue javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.

Vue.js image clipping Components using Vue-Rx

vuejs-clipper .Vue.js image clipping components using Vue-Rx. Add image clipping components to your Vue application in nothing flat. Touch devices supported and fully responsive.

Vue.js JWT Authentication with Vuex and Vue Router

Build a Vue.js JWT Authentication application using Vuex, Vue Router, VeeValidate - JWT authentication with Vue, Vuex, Vue Router that supports VeeValidate

Vue.js JWT Authentication with Vuex and Vue Router

Vue Vuex JWT Auth .Vue.js JWT Authentication with Vuex and Vue Router