<select onchange="test()" id="select_id">
<option value="0">-Select-</option>
<option value="1">Communication</option>
</select>
I need to get the value of the selected option in javascript: does anyone know how to get the selected value or text, please tell how to write a function for it. I have assigned onchange() function to select so what do i do after that?
This question is related to
javascript
Use either JavaScript or jQuery for this.
Using JavaScript
<script>
function val() {
d = document.getElementById("select_id").value;
alert(d);
}
</script>
<select onchange="val()" id="select_id">
Using jQuery
$('#select_id').change(function(){
alert($(this).val());
})
function test(a) {_x000D_
var x = (a.value || a.options[a.selectedIndex].value); //crossbrowser solution =)_x000D_
alert(x);_x000D_
}
_x000D_
<select onchange="test(this)" id="select_id">_x000D_
<option value="0">-Select-</option>_x000D_
<option value="1">Communication</option>_x000D_
<option value="2">Communication</option>_x000D_
<option value="3">Communication</option>_x000D_
</select>
_x000D_
function test(){_x000D_
var sel1 = document.getElementById("select_id");_x000D_
var strUser1 = sel1.options[sel1.selectedIndex].value;_x000D_
console.log(strUser1);_x000D_
alert(strUser1);_x000D_
// Inorder to get the Test as value i.e "Communication"_x000D_
var sel2 = document.getElementById("select_id");_x000D_
var strUser2 = sel2.options[sel2.selectedIndex].text;_x000D_
console.log(strUser2);_x000D_
alert(strUser2);_x000D_
}
_x000D_
<select onchange="test()" id="select_id">_x000D_
<option value="0">-Select-</option>_x000D_
<option value="1">Communication</option>_x000D_
</select>
_x000D_
<script>
function test(a) {
var x = a.selectedIndex;
alert(x);
}
</script>
<select onchange="test(this)" id="select_id">
<option value="0">-Select-</option>
<option value="1">Communication</option>
<option value="2">Communication</option>
<option value="3">Communication</option>
</select>
in the alert you'll see the INT value of the selected index, treat the selection as an array and you'll get the value
I have tried to explain with my own sample, but I hope it will help you. You don't need onchange="test()" Please run code snippet for getting a live result.
document.getElementById("cars").addEventListener("change", displayCar);_x000D_
_x000D_
function displayCar() {_x000D_
var selected_value = document.getElementById("cars").value;_x000D_
alert(selected_value);_x000D_
}
_x000D_
<select id="cars">_x000D_
<option value="bmw">BMW</option>_x000D_
<option value="mercedes">Mercedes</option>_x000D_
<option value="volkswagen">Volkswagen</option>_x000D_
<option value="audi">Audi</option>_x000D_
</select>
_x000D_
HTML:
<select onchange="cityChanged(this.value)">
<option value="CHICAGO">Chicago</option>
<option value="NEWYORK">New York</option>
</select>
JS:
function cityChanged(city) {
alert(city);
}
Use
document.getElementById("select_id").selectedIndex
Or to get the value:
document.getElementById("select_id").value
jquery
$('#select_id').change(function(){
// selected value
alert($(this).val());
// selected text
alert($(this).find("option:selected").text());
})
html
<select onchange="test()" id="select_id">
<option value="0">-Select-</option>
<option value="1">Communication</option>
</select>
Wow, no really reusable solutions among answers yet.. I mean, a standart event handler should get only an event
argument and doesn't have to use ids at all.. I'd use:
function handleSelectChange(event) {
// if you want to support some really old IEs, add
// event = event || window.event;
var selectElement = event.target;
var value = selectElement.value;
// to support really old browsers, you may use
// selectElement.value || selectElement.options[selectElement.selectedIndex].value;
// like el Dude has suggested
// do whatever you want with value
}
You may use this handler with each – inline js:
<select onchange="handleSelectChange(event)">
<option value="1">one</option>
<option value="2">two</option>
</select>
jQuery:
jQuery('#select_id').on('change',handleSelectChange);
or vanilla JS handler setting:
var selector = document.getElementById("select_id");
selector.onchange = handleSelectChange;
// or
selector.addEventListener('change', handleSelectChange);
And don't have to rewrite this for each select
element you have.
Example snippet:
function handleSelectChange(event) {_x000D_
_x000D_
var selectElement = event.target;_x000D_
var value = selectElement.value;_x000D_
alert(value);_x000D_
}
_x000D_
<select onchange="handleSelectChange(event)">_x000D_
<option value="1">one</option>_x000D_
<option value="2">two</option>_x000D_
</select>
_x000D_
I wonder that everyone has posted about value
and text
option to get from <option>
and no one suggested label
.
So I am suggesting label
too, as supported by all browsers
To get value
(same as others suggested)
function test(a) {
var x = a.options[a.selectedIndex].value;
alert(x);
}
To get option
text
(i.e. Communication or -Select-)
function test(a) {
var x = a.options[a.selectedIndex].text;
alert(x);
}
OR (New suggestion)
function test(a) {
var x = a.options[a.selectedIndex].label;
alert(x);
}
HTML
<select onchange="test(this)" id="select_id">
<option value="0">-Select-</option>
<option value="1">Communication</option>
<option value="2" label=‘newText’>Communication</option>
</select>
Note: In above HTML for
option
value 2,label
will return newText instead of Communication
Also
Note: It is not possible to set the label property in Firefox (only return).
function test(){_x000D_
var sel1 = document.getElementById("select_id");_x000D_
var strUser1 = sel1.options[sel1.selectedIndex].value;_x000D_
console.log(strUser1);_x000D_
alert(strUser1);_x000D_
// Inorder to get the Test as value i.e "Communication"_x000D_
var sel2 = document.getElementById("select_id");_x000D_
var strUser2 = sel2.options[sel2.selectedIndex].text;_x000D_
console.log(strUser2);_x000D_
alert(strUser2);_x000D_
}
_x000D_
<select onchange="test()" id="select_id">_x000D_
<option value="0">-Select-</option>_x000D_
<option value="1">Communication</option>_x000D_
</select>
_x000D_
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
let dropdown = document.querySelector('select');
if (dropdown) dropdown.addEventListener('change', function(event) {
console.log(event.target.value);
});
If you're googling this, and don't want the event listener to be an attribute, use:
document.getElementById('my-select').addEventListener('change', function() {_x000D_
console.log('You selected: ', this.value);_x000D_
});
_x000D_
<select id="my-select">_x000D_
<option value="1">One</option>_x000D_
<option value="2">Two</option>_x000D_
<option value="3">Three</option>_x000D_
</select>
_x000D_
No need for an onchange function. You can grab the value in one line:
document.getElementById("select_id").options[document.getElementById("select_id").selectedIndex].value;
Or, split it up for better readability:
var select_id = document.getElementById("select_id");
select_id.options[select_id.selectedIndex].value;
This is an old question, but I am not sure why people didn't suggest using the event object to retrieve the info instead of searching through the DOM again.
Simply go through the event object in your function onChange, see example bellow
function test() {
console.log(event.srcElement.value);
}
http://jsfiddle.net/Corsico/3yvh9wc6/5/
Might be useful to people looking this up today if this wasn't default behavior 7 years ago
Source: Stackoverflow.com