I have a dropdown list like this:
<select id="box1">
<option value="98">dog</option>
<option value="7122">cat</option>
<option value="142">bird</option>
</select>
How can I get the actual option text rather than the value using JavaScript? I can get the value with something like:
<select id="box1" onChange="myNewFunction(this.selectedIndex);" >
But rather than 7122
I want cat
.
This question is related to
javascript
html
dom
drop-down-menu
I just copy all amazon.com "select list", you can see demo from following image.gif link.
I love amazon.com "select/option" css style and javascript tricks...
try it now....
/***javascript code***/
document.querySelector("#mySelect").addEventListener("click", () => {
var x = document.querySelector("#mySelect").selectedIndex;
let optionText = document.getElementsByTagName("option")[x].innerText;
document.querySelector(".nav-search-label").innerText = optionText;
});
_x000D_
/***style.css***/
.nav-left {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: static;
float: none;
}
.nav-search-scope {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: relative;
float: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.nav-search-facade {
position: relative;
float: left;
cursor: default;
overflow: hidden;
top: 3px;
}
.nav-search-label {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #555;
font-size: 12px;
line-height: 33px;
margin-right: 21px;
margin-left: 5px;
min-width: 19px;
}
.nav-icon {
position: absolute;
top: 14px;
right: 8px;
border-style: solid;
_border-style: dashed;
border-width: 4px;
border-color: transparent;
border-top: 4px solid #666;
border-bottom-width: 0;
width: 0;
height: 0;
font-size: 0;
line-height: 0;
}
.nav-search-dropdown {
position: absolute;
display: block;
top: -1px;
left: 0;
height: 35px;
width: auto;
font-family: inherit;
outline: 0;
margin: 0;
padding: 0;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
visibility: visible;
border: 0;
line-height: 35px;
}
_x000D_
<!--html code-->
<div class="nav-left">
<div id="nav-search-dropdown-card">
<div class="nav-search-scope nav-sprite">
<div class="nav-search-facade">
<span class="nav-search-label" style="width: auto">All</span>
<i class="nav-icon"></i>
</div>
<select
id="mySelect"
class="nav-search-dropdown searchSelect"
style="display: block; top: 3px"
tabindex="0"
title="Search in"
>
<option>All Departments</option>
<option>Arts & Crafts</option>
<option>Automotive</option>
<option>Baby</option>
<option>Beauty & Personal Care</option>
<option>Books</option>
<option>Computers</option>
<option>Digital Music</option>
<option>Electronics</option>
<option>Kindle Store</option>
<option>Prime Video</option>
<option>Women's Fashion</option>
<option>Men's Fashion</option>
<option>Girls' Fashion</option>
<option>Boys' Fashion</option>
<option>Deals</option>
<option>Health & Household</option>
<option>Home & Kitchen</option>
<option>Industrial & Scientific</option>
<option>Luggage</option>
<option>Movies & TV</option>
<option>Music, CDs & Vinyl</option>
<option>Pet Supplies</option>
<option>Software</option>
<option>Sports & Outdoors</option>
<option>Tools & Home Improvement</option>
<option>Toys & Games</option>
<option>Video Games</option>
</select>
</div>
</div>
</div>
_x000D_
React / Latest JavaScript
onChange = { e => e.currentTarget.option[e.selectedIndex].text }
will give you exact value if values are inside a loop.
All these functions and random things, I think it is best to use this, and do it like this:
this.options[this.selectedIndex].text
You'll need to get the innerHTML of the option, and not its value.
Use this.innerHTML
instead of this.selectedIndex
.
Edit: You'll need to get the option element first and then use innerHTML.
Use this.text
instead of this.selectedIndex
.
<select class="cS" onChange="fSel2(this.value);">
<option value="0">S?lectionner</option>
<option value="1">Un</option>
<option value="2" selected>Deux</option>
<option value="3">Trois</option>
</select>
<select id="iS1" onChange="fSel(options[this.selectedIndex].value);">
<option value="0">S?lectionner</option>
<option value="1">Un</option>
<option value="2" selected>Deux</option>
<option value="3">Trois</option>
</select><br>
<select id="iS2" onChange="fSel3(options[this.selectedIndex].text);">
<option value="0">S?lectionner</option>
<option value="1">Un</option>
<option value="2" selected>Deux</option>
<option value="3">Trois</option>
</select>
<select id="iS3" onChange="fSel3(options[this.selectedIndex].textContent);">
<option value="0">S?lectionner</option>
<option value="1">Un</option>
<option value="2" selected>Deux</option>
<option value="3">Trois</option>
</select>
<select id="iS4" onChange="fSel3(options[this.selectedIndex].label);">
<option value="0">S?lectionner</option>
<option value="1">Un</option>
<option value="2" selected>Deux</option>
<option value="3">Trois</option>
</select>
<select id="iS4" onChange="fSel3(options[this.selectedIndex].innerHTML);">
<option value="0">S?lectionner</option>
<option value="1">Un</option>
<option value="2" selected>Deux</option>
<option value="3">Trois</option>
</select>
<script type="text/javascript"> "use strict";
const s=document.querySelector(".cS");
// options[this.selectedIndex].value
let fSel = (sIdx) => console.log(sIdx,
s.options[sIdx].text, s.options[sIdx].textContent, s.options[sIdx].label);
let fSel2= (sIdx) => { // this.value
console.log(sIdx, s.options[sIdx].text,
s.options[sIdx].textContent, s.options[sIdx].label);
}
// options[this.selectedIndex].text
// options[this.selectedIndex].textContent
// options[this.selectedIndex].label
// options[this.selectedIndex].innerHTML
let fSel3= (sIdx) => {
console.log(sIdx);
}
</script> // fSel
But :
<script type="text/javascript"> "use strict";
const x=document.querySelector(".cS"),
o=x.options, i=x.selectedIndex;
console.log(o[i].value,
o[i].text , o[i].textContent , o[i].label , o[i].innerHTML);
</script> // .cS"
And also this :
<select id="iSel" size="3">
<option value="one">Un</option>
<option value="two">Deux</option>
<option value="three">Trois</option>
</select>
<script type="text/javascript"> "use strict";
const i=document.getElementById("iSel");
for(let k=0;k<i.length;k++) {
if(k == i.selectedIndex) console.log("Selected ".repeat(3));
console.log(`${Object.entries(i.options)[k][1].value}`+
` => ` +
`${Object.entries(i.options)[k][1].innerHTML}`);
console.log(Object.values(i.options)[k].value ,
" => ",
Object.values(i.options)[k].innerHTML);
console.log("=".repeat(25));
}
</script>
both that just need using vanilla javascript
live demo
const log = console.log;_x000D_
const areaSelect = document.querySelector(`[id="area"]`);_x000D_
_x000D_
areaSelect.addEventListener(`change`, (e) => {_x000D_
// log(`e.target`, e.target);_x000D_
const select = e.target;_x000D_
const value = select.value;_x000D_
const desc = select.selectedOptions[0].text;_x000D_
log(`option desc`, desc);_x000D_
});
_x000D_
<div class="select-box clearfix">_x000D_
<label for="area">Area</label>_x000D_
<select id="area">_x000D_
<option value="101">A1</option>_x000D_
<option value="102">B2</option>_x000D_
<option value="103">C3</option>_x000D_
</select>_x000D_
</div>
_x000D_
live demo
const log = console.log;_x000D_
const areaSelect = document.querySelector(`[id="area"]`);_x000D_
_x000D_
areaSelect.addEventListener(`change`, (e) => {_x000D_
// log(`e.target`, e.target);_x000D_
const select = e.target;_x000D_
const value = select.value;_x000D_
const desc = select.options[select.selectedIndex].text;_x000D_
log(`option desc`, desc);_x000D_
});
_x000D_
<div class="select-box clearfix">_x000D_
<label for="area">Area</label>_x000D_
<select id="area">_x000D_
<option value="101">A1</option>_x000D_
<option value="102">B2</option>_x000D_
<option value="103">C3</option>_x000D_
</select>_x000D_
</div>
_x000D_
Plain JavaScript
var sel = document.getElementById("box1");
var text= sel.options[sel.selectedIndex].text;
jQuery:
$("#box1 option:selected").text();
Try the below:
myNewFunction = function(id, index) {
var selection = document.getElementById(id);
alert(selection.options[index].innerHTML);
};
See here jsfiddle sample
HTML:
<select id="box1" onChange="myNewFunction(this);">
JavaScript:
function myNewFunction(element) {
var text = element.options[element.selectedIndex].text;
// ...
}
Use -
$.trim($("select").children("option:selected").text()) //cat
Here is the fiddle - http://jsfiddle.net/eEGr3/
Source: Stackoverflow.com