ItSolutionStuff.com

Vue JS Get Selected Option Text Example

By Hardik Savani • November 5, 2023
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.

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.

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

Tags: Vue.JS
Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

How to Define Global Variables in Vue JS?

Read Now →

How to Get Data Attribute Value in Vue JS?

Read Now →

How to Get Query String Parameters in Vue JS?

Read Now →

How to Download File using Axios Vue JS?

Read Now →

Vue JS Get Dropdown Selected Value Example

Read Now →

How to Get String Length in Vue JS?

Read Now →

How to Convert String to Array in Vue JS?

Read Now →