javascript get selected text not value
Question
Is it possible to get the selected text in the select not its value?
<select id="animals">
<option value="mammals">Elephant</option>
<option value="reptile">Snakes</option>
<option value="mammals">Bear</option>
<option value="birds">Ostrich</option>
</select>
I want to know the type of animal that is being selected.
Thank you for all your help.
5 answers
solution1
3 2016-03-31 11:39:50
function getSelectedText(elementId) {
var elt = document.getElementById(elementId);
if (elt.selectedIndex == -1)
return null;
return elt.options[elt.selectedIndex].text;
}
var text = getSelectedText('animals');
solution2
1 2016-03-31 11:40:58
Use
Document.querySelector(), Returns the first element within the document that matches the specified group of selectors.
console.log(document.querySelector('#animals option:checked').textContent);
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script> <select id="animals"> <option value="mammals">Elephant</option> <option value="reptile">Snakes</option> <option value="mammals">Bear</option> <option value="birds">Ostrich</option> </select>
solution3
0 2016-03-31 11:38:02
jQuery:
$("#selection option:selected").text();
with pure Javascript:
this.options[this.selectedIndex].innerText
Try This
solution4
0 2016-03-31 11:44:20
It can be done by using javascript selectedIndex and text method.
<!DOCTYPE html> <html> <body> <p>Choose an option in the drop-down list and display that option.</p> <form> <select id="mySelect" onchange="myFunction()"> <option value="mammals">Elephant</option> <option value="reptile">Snakes</option> <option value="mammals">Bear</option> <option value="birds">Ostrich</option> </select> </form> <p id="demo"></p> <script> function myFunction() { var x = document.getElementById("mySelect"); var i = x.selectedIndex; document.getElementById("demo").innerHTML = x.options[i].text; } </script> </body> </html>
solution5
0 2020-04-16 10:29:10
I had a similar problem whereby I wanted to output selected text (not value) into a Textarea box. I solved it this way:
<label>Objectives :</label>
<select name="objectives" class="objectives" onchange="getObjectives(this);">
<option selected="selected">--Select Objectives--</option>
<option selected="selected">--One--</option>
<option selected="selected">--Two--</option>
</select>
<textarea rows="4" cols="30" id="objid"></textarea>
<script>
function getObjectives(sel) {
// Select option returns text instead of value of option
document.getElementById ("animals").value = sel.options[sel.selectedIndex].text;
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.