EN
JavaScript - get selected text and value from option select on change
5
points
In this article, we would like to show you how to get a select element value on a change event using JavaScript.
1. option:selected selector example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<select id="my-dropdown-id">
<option value="1">Blue</option>
<option value="2" selected>Green</option>
<option value="3">Red</option>
<option value="4">Yellow</option>
</select>
<script>
$(document).ready(function() {
var element = $('#my-dropdown-id');
element.change(function() {
var selection = $('option:selected', element); // $(':selected', element);
var value = selection.val();
var text = selection.text();
console.log('value: ' + value + ', text: ' + text);
});
});
</script>
</body>
</html>
2. find method with option:selected selector example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<select id="my-dropdown-id">
<option value="1">Blue</option>
<option value="2" selected>Green</option>
<option value="3">Red</option>
<option value="4">Yellow</option>
</select>
<script>
$(document).ready(function() {
var element = $('#my-dropdown-id');
element.change(function() {
var selection = element.find("option:selected"); // element.find(":selected");
var value = selection.val();
var text = selection.text();
console.log('value: ' + value + ', text: ' + text);
});
});
</script>
</body>
</html>
3. selectionIndex and options properties example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<select id="my-dropdown-id">
<option value="1">Blue</option>
<option value="2" selected>Green</option>
<option value="3">Red</option>
<option value="4">Yellow</option>
</select>
<script>
$(document).ready(function() {
var element = $('#my-dropdown-id');
element.change(function() {
var options = element.prop('options');
// below code uses pure JavaScript
var index = options.selectedIndex;
if(index == -1) {
console.log('Option is not selected.');
} else {
var option = options[index];
var value = option.value;
var text = option.label
console.log('value: ' + value + ', text: ' + text);
}
});
});
</script>
</body>
</html>