November 5, 2023
Category : Vue.JS
Vue JS Get Selected Option Text Example
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:
Read Also: How to Use Ternary Operator in Vue JS?
<!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...
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of ItSolutionstuff.com. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
;void(0);){kind=link}
;void(0);){kind=link}