How do I grab the option text from a value

Question

So I have this snippet of HTML:

<div class="col-md-3">
    <div class="form-group">
        <select id="billcountry" class="form-control" name="bill_country" onchange="alert(this.value); console.log(this);" tabindex="16">
            <option value="USA">United States</option>
            <option value="CAN">Canada</option>
            <option value="AFGH">Afghanistan</option>
            <option value="ALBA">Albania</option>
            <option value="ALGE">Algeria</option>
            <option value="ANGO">Angola</option>
            <option value="ANGU">Anguilla</option>
            <option value="ANTA">Antartica</option>
            <option value="ANTI">Antigua &amp; Barbuda</option>
            <option value="ARGE">Argentina</option>
            <option value="ARME">Armenia</option>
            <option value="ARUB">Aruba</option>
            <option value="AUST">Austria</option>
            <option value="AUS">Australia</option>
            <option value="AZER">Azerbaijan</option>
            <option value="BAHA">Bahamas</option>
            <option value="BAHR">Bahrain</option>
            <option value="BANG">Bangladesh</option>
            <option value="BARB">Barbados</option>
            <option value="BELA">Belarus</option>
            <option value="BELG">Belgium</option>
            <option value="BELI">Belize</option>
            <option value="BENI">Benin</option>
            <option value="BERM">Bermuda</option>
            <option value="BHUT">Bhutan</option>
            <option value="BOLI">Bolivia</option>
            <option value="BORN">Borneo</option>
            <option value="BOSN">Bosnia</option>
            <option value="BOTS">Botswana</option>
            <option value="BRAZ">Brazil</option>
            <option value="BRIO">British Indian Ocean Territories</option>
            <option value="BRVI">British Virgin Islands</option>
            <option value="BRUN">Brunei</option>
            <option value="BULG">Bulgaria</option>
            <option value="BURK">Burkina Faso</option>
            <option value="BURU">Burundi</option>
            <option value="CAMB">Cambodia</option>
            <option value="CAME">Cameroon</option>
            <option value="CAPV">Cape Verde Island</option>
            <option value="CAYM">Cayman Islands</option>
            <option value="CAFR">Central African Republic</option>
            <option value="CHAD">Chad</option>
            <option value="CHIL">Chile</option>
            <option value="CHIN">China</option>
            <option value="COLO">Colombia</option>
            <option value="COMO">Comoros</option>
            <option value="CONG">Congo</option>
            <option value="COST">Costa Rica</option>
            <option value="IVOR">Cote D'ivoire</option>
            <option value="CROA">Croatia</option>
            <option value="CUBA">Cuba</option>
            <option value="CYPR">Cyprus</option>
            <option value="CZEC">Czech Republic</option>
            <option value="DENM">Denmark</option>
            <option value="DJIB">Djibouti</option>
            <option value="DOMI">Dominican Republic</option>
            <option value="ECUA">Ecuador</option>
            <option value="EGYP">Egypt</option>
            <option value="ELSA">El Salvador</option>
            <option value="ENGL">England</option>
            <option value="EQGU">Equatorial Guinea</option>
            <option value="ERIT">Eritrea</option>
            <option value="ESTO">Estonia</option>
            <option value="ETHI">Ethiopia</option>
            <option value="FALK">Falkland Islands</option>
            <option value="FARO">Faroe Islands</option>
            <option value="FIJI">Fiji</option>
            <option value="FINL">Finland</option>
            <option value="FRAN">France</option>
            <option value="FRGU">French Guiana</option>
            <option value="POLY">French Polynesia</option>
            <option value="FRST">French So Territories</option>
            <option value="GABO">Gabon</option>
            <option value="GAMB">Gambia</option>
            <option value="GEOR">Georgia</option>
            <option value="GERM">Germany</option>
            <option value="GHAN">Ghana</option>
            <option value="GIBR">Gibraltar</option>
            <option value="GREC">Greece</option>
            <option value="GREE">Greenland</option>
            <option value="GREN">Grenada</option>
            <option value="GUAD">Guadeloupe</option>
            <option value="GUAT">Guatemala</option>
            <option value="GUIB">Guinea-bissau</option>
            <option value="GUYA">Guyana</option>
            <option value="HAIT">Haiti</option>
            <option value="HOND">Honduras</option>
            <option value="HONG">Hong Kong</option>
            <option value="HUNG">Hungary</option>
            <option value="ICEL">Iceland</option>
            <option value="INDI">India</option>
            <option value="INDO">Indonesia</option>
            <option value="IRAN">Iran</option>
            <option value="IRAQ">Iraq</option>
            <option value="IREL">Ireland</option>
            <option value="ISRA">Israel</option>
            <option value="ITAL">Italy</option>
            <option value="JAMA">Jamaica</option>
            <option value="JAPA">Japan</option>
            <option value="JORD">Jordan</option>
            <option value="KAZA">Kazakhstan</option>
            <option value="KENY">Kenya</option>
            <option value="KUWA">Kuwait</option>
            <option value="KYRG">Kyrgyzstan</option>
            <option value="LAOS">Laos</option>
            <option value="LATV">Latvia</option>
            <option value="LEBA">Lebanon</option>
            <option value="LESO">Lesotho</option>
            <option value="LIBE">Liberia</option>
            <option value="LIBY">Libya</option>
            <option value="LIEC">Liechtenstien</option>
            <option value="LITH">Lithuania</option>
            <option value="LUXE">Luxembourg</option>
            <option value="MACA">Macau</option>
            <option value="MACE">Macedonia</option>
            <option value="MADA">Madagascar</option>
            <option value="MALW">Malawi</option>
            <option value="MALA">Malaysia</option>
            <option value="MALD">Maldives</option>
            <option value="MALI">Mali</option>
            <option value="MALT">Malta</option>
            <option value="MART">Martinique</option>
            <option value="MAUA">Mauritania</option>
            <option value="MAUS">Mauritius</option>
            <option value="MAYO">Mayotte</option>
            <option value="MEXI">Mexico</option>
            <option value="MOLD">Moldova</option>
            <option value="MONA">Monaco</option>
            <option value="MONG">Mongolia</option>
            <option value="MONT">Montserrat</option>
            <option value="MORO">Morocco</option>
            <option value="MOZA">Mozambique</option>
            <option value="MYAN">Myanmar</option>
            <option value="NIRE">N Ireland</option>
            <option value="NAMI">Namibia</option>
            <option value="NEPA">Nepal</option>
            <option value="NETH">Netherlands</option>
            <option value="NANT">Netherlands Antilles</option>
            <option value="NCAL">New Caledonia</option>
            <option value="NGUI">New Guinea</option>
            <option value="NZEA">New Zealand</option>
            <option value="NICA">Nicaragua</option>
            <option value="NIGE">Niger</option>
            <option value="NIGA">Nigeria</option>
            <option value="NKOR">North Korea</option>
            <option value="NORW">Norway</option>
            <option value="OMAN">Oman</option>
            <option value="PAKI">Pakistan</option>
            <option value="PANA">Panama</option>
            <option value="PAPU">Papua New Guinea</option>
            <option value="PARA">Paraguay</option>
            <option value="PERU">Peru</option>
            <option value="PHIL">Philippines</option>
            <option value="POLA">Poland</option>
            <option value="PORT">Portugal</option>
            <option value="ANDO">Principality Of Andorra</option>
            <option value="QATA">Qatar</option>
            <option value="ROMA">Romania</option>
            <option value="RUSS">Russia</option>
            <option value="RWAN">Rwanda</option>
            <option value="SGEO">S Georgia &amp; S Sandwich Isls</option>
            <option value="SOMO">Samoa (western)</option>
            <option value="SANM">San Marino</option>
            <option value="SAOT">Sao Tome &amp; Principe</option>
            <option value="SAUD">Saudi Arabia</option>
            <option value="SCOT">Scotland</option>
            <option value="SENE">Senegal</option>
            <option value="SEYC">Seychelles Island</option>
            <option value="SIER">Sierra Leone</option>
            <option value="SING">Singapore</option>
            <option value="SLVK">Slovakia</option>
            <option value="SLVN">Slovenia</option>
            <option value="SOLO">Solomon Island</option>
            <option value="SOMA">Somalia</option>
            <option value="SAFR">South Africa</option>
            <option value="SKOR">South Korea</option>
            <option value="SPAI">Spain</option>
            <option value="SRIL">Sri Lanka</option>
            <option value="STHL">St Helena</option>
            <option value="STKN">St Kitts &amp; Nevis</option>
            <option value="STLU">St Lucia</option>
            <option value="STPM">St Pierre &amp; Miquelon</option>
            <option value="STVG">St Vincent &amp; The Grenadines</option>
            <option value="SUDA">Sudan</option>
            <option value="SURI">Suriname</option>
            <option value="SWAZ">Swaziland</option>
            <option value="SWED">Sweden</option>
            <option value="SWIT">Switzerland</option>
            <option value="SYRI">Syria</option>
            <option value="TAIW">Taiwan</option>
            <option value="TANZ">Tanzania</option>
            <option value="THAI">Thailand</option>
            <option value="TOGO">Togo</option>
            <option value="TONG">Tonga</option>
            <option value="TRIN">Trinidad &amp; Tobago</option>
            <option value="TUNI">Tunisia</option>
            <option value="TURK">Turkey</option>
            <option value="TURC">Turks &amp; Caicos Islands</option>
            <option value="UGAN">Uganda</option>
            <option value="UKRA">Ukraine</option>
            <option value="UAE">United Arab Emirates</option>
            <option value="URUG">Uruguay</option>
            <option value="UZBE">Uzbekistan</option>
            <option value="VATI">Vatican</option>
            <option value="VENE">Venezuela</option>
            <option value="VIET">Vietnam</option>
            <option value="WALE">Wales</option>
            <option value="WFIS">Wallis &amp; Futuna Islands</option>
            <option value="SAHA">Western Sahara</option>
            <option value="WSAM">Western Samoa</option>
            <option value="YEME">Yemen</option>
            <option value="YUGO">Yugoslavia</option>
            <option value="ZAIR">Zaire</option>
            <option value="ZAMB">Zambia</option>
            <option value="ZIMB">Zimbabwe</option>
        </select> 
    </div>
</div>

And as you can see, when the value of the <select> changes, the new value is passed to an alert currently.

I have looked all over for a solution (without jQuery to grab the options text based solely off of the value.

So if the select were changed to value USA, I have attempted (and failed) at getting the words United States

Any thoughts on how to efficiently go about this without using jQuery or having to loop through each option and checking its value and then grabbing its innerHTML if it matches?

**EDIT: ** I am searching for the actual TEXT and not the VALUE. Why this isn't duplicate.

Possible duplicate of [Get selected value in dropdown list using JavaScript?](http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — LostMyGlasses, Feb 02 '16 at 16:59
@LostMyGlasses I was looking for the TEXT not the VALUE. In my example, I'm already grabbing the value. — Derek Pollard, Feb 02 '16 at 17:15
The way to retrieve the text is explained at the answer I linked — LostMyGlasses, Feb 02 '16 at 17:17

score 1 · Answer 1 · answered Feb 02 '16 at 17:00

You can use this to get the text of the selected element:

this[this.selectedIndex].innerHTML

<div class="col-md-3">
 <div class="form-group">
  <select id="billcountry" class="form-control" name="bill_country" onchange="alert(this[this.selectedIndex].innerHTML); console.log(this);" tabindex="16">
  <option value="USA">United States</option>
  <option value="CAN">Canada</option>
  <option value="AFGH">Afghanistan</option>
  <option value="ALBA">Albania</option>
  <option value="ALGE">Algeria</option>
  <option value="ANGO">Angola</option>
  <option value="ANGU">Anguilla</option>
  <option value="ANTA">Antartica</option>
  <option value="ANTI">Antigua &amp; Barbuda</option>
  <option value="ARGE">Argentina</option>
  <option value="ARME">Armenia</option>
  <option value="ARUB">Aruba</option>
  <option value="AUST">Austria</option>
  <option value="AUS">Australia</option>
  <option value="AZER">Azerbaijan</option>
  <option value="BAHA">Bahamas</option>
  <option value="BAHR">Bahrain</option>
  <option value="BANG">Bangladesh</option>
  <option value="BARB">Barbados</option>
  <option value="BELA">Belarus</option>
  <option value="BELG">Belgium</option>
  <option value="BELI">Belize</option>
  <option value="BENI">Benin</option>
  <option value="BERM">Bermuda</option>
  <option value="BHUT">Bhutan</option>
  <option value="BOLI">Bolivia</option>
  <option value="BORN">Borneo</option>
  <option value="BOSN">Bosnia</option>
  <option value="BOTS">Botswana</option>
  <option value="BRAZ">Brazil</option>
  <option value="BRIO">British Indian Ocean Territories</option>
  <option value="BRVI">British Virgin Islands</option>
  <option value="BRUN">Brunei</option>
  <option value="BULG">Bulgaria</option>
  <option value="BURK">Burkina Faso</option>
  <option value="BURU">Burundi</option>
  <option value="CAMB">Cambodia</option>
  <option value="CAME">Cameroon</option>
  <option value="CAPV">Cape Verde Island</option>
  <option value="CAYM">Cayman Islands</option>
  <option value="CAFR">Central African Republic</option>
  <option value="CHAD">Chad</option>
  <option value="CHIL">Chile</option>
  <option value="CHIN">China</option>
  <option value="COLO">Colombia</option>
  <option value="COMO">Comoros</option>
  <option value="CONG">Congo</option>
  <option value="COST">Costa Rica</option>
  <option value="IVOR">Cote D'ivoire</option>
  <option value="CROA">Croatia</option>
  <option value="CUBA">Cuba</option>
  <option value="CYPR">Cyprus</option>
  <option value="CZEC">Czech Republic</option>
  <option value="DENM">Denmark</option>
  <option value="DJIB">Djibouti</option>
  <option value="DOMI">Dominican Republic</option>
  <option value="ECUA">Ecuador</option>
  <option value="EGYP">Egypt</option>
  <option value="ELSA">El Salvador</option>
  <option value="ENGL">England</option>
  <option value="EQGU">Equatorial Guinea</option>
  <option value="ERIT">Eritrea</option>
  <option value="ESTO">Estonia</option>
  <option value="ETHI">Ethiopia</option>
  <option value="FALK">Falkland Islands</option>
  <option value="FARO">Faroe Islands</option>
  <option value="FIJI">Fiji</option>
  <option value="FINL">Finland</option>
  <option value="FRAN">France</option>
  <option value="FRGU">French Guiana</option>
  <option value="POLY">French Polynesia</option>
  <option value="FRST">French So Territories</option>
  <option value="GABO">Gabon</option>
  <option value="GAMB">Gambia</option>
  <option value="GEOR">Georgia</option>
  <option value="GERM">Germany</option>
  <option value="GHAN">Ghana</option>
  <option value="GIBR">Gibraltar</option>
  <option value="GREC">Greece</option>
  <option value="GREE">Greenland</option>
  <option value="GREN">Grenada</option>
  <option value="GUAD">Guadeloupe</option>
  <option value="GUAT">Guatemala</option>
  <option value="GUIB">Guinea-bissau</option>
  <option value="GUYA">Guyana</option>
  <option value="HAIT">Haiti</option>
  <option value="HOND">Honduras</option>
  <option value="HONG">Hong Kong</option>
  <option value="HUNG">Hungary</option>
  <option value="ICEL">Iceland</option>
  <option value="INDI">India</option>
  <option value="INDO">Indonesia</option>
  <option value="IRAN">Iran</option>
  <option value="IRAQ">Iraq</option>
  <option value="IREL">Ireland</option>
  <option value="ISRA">Israel</option>
  <option value="ITAL">Italy</option>
  <option value="JAMA">Jamaica</option>
  <option value="JAPA">Japan</option>
  <option value="JORD">Jordan</option>
  <option value="KAZA">Kazakhstan</option>
  <option value="KENY">Kenya</option>
  <option value="KUWA">Kuwait</option>
  <option value="KYRG">Kyrgyzstan</option>
  <option value="LAOS">Laos</option>
  <option value="LATV">Latvia</option>
  <option value="LEBA">Lebanon</option>
  <option value="LESO">Lesotho</option>
  <option value="LIBE">Liberia</option>
  <option value="LIBY">Libya</option>
  <option value="LIEC">Liechtenstien</option>
  <option value="LITH">Lithuania</option>
  <option value="LUXE">Luxembourg</option>
  <option value="MACA">Macau</option>
  <option value="MACE">Macedonia</option>
  <option value="MADA">Madagascar</option>
  <option value="MALW">Malawi</option>
  <option value="MALA">Malaysia</option>
  <option value="MALD">Maldives</option>
  <option value="MALI">Mali</option>
  <option value="MALT">Malta</option>
  <option value="MART">Martinique</option>
  <option value="MAUA">Mauritania</option>
  <option value="MAUS">Mauritius</option>
  <option value="MAYO">Mayotte</option>
  <option value="MEXI">Mexico</option>
  <option value="MOLD">Moldova</option>
  <option value="MONA">Monaco</option>
  <option value="MONG">Mongolia</option>
  <option value="MONT">Montserrat</option>
  <option value="MORO">Morocco</option>
  <option value="MOZA">Mozambique</option>
  <option value="MYAN">Myanmar</option>
  <option value="NIRE">N Ireland</option>
  <option value="NAMI">Namibia</option>
  <option value="NEPA">Nepal</option>
  <option value="NETH">Netherlands</option>
  <option value="NANT">Netherlands Antilles</option>
  <option value="NCAL">New Caledonia</option>
  <option value="NGUI">New Guinea</option>
  <option value="NZEA">New Zealand</option>
  <option value="NICA">Nicaragua</option>
  <option value="NIGE">Niger</option>
  <option value="NIGA">Nigeria</option>
  <option value="NKOR">North Korea</option>
  <option value="NORW">Norway</option>
  <option value="OMAN">Oman</option>
  <option value="PAKI">Pakistan</option>
  <option value="PANA">Panama</option>
  <option value="PAPU">Papua New Guinea</option>
  <option value="PARA">Paraguay</option>
  <option value="PERU">Peru</option>
  <option value="PHIL">Philippines</option>
  <option value="POLA">Poland</option>
  <option value="PORT">Portugal</option>
  <option value="ANDO">Principality Of Andorra</option>
  <option value="QATA">Qatar</option>
  <option value="ROMA">Romania</option>
  <option value="RUSS">Russia</option>
  <option value="RWAN">Rwanda</option>
  <option value="SGEO">S Georgia &amp; S Sandwich Isls</option>
  <option value="SOMO">Samoa (western)</option>
  <option value="SANM">San Marino</option>
  <option value="SAOT">Sao Tome &amp; Principe</option>
  <option value="SAUD">Saudi Arabia</option>
  <option value="SCOT">Scotland</option>
  <option value="SENE">Senegal</option>
  <option value="SEYC">Seychelles Island</option>
  <option value="SIER">Sierra Leone</option>
  <option value="SING">Singapore</option>
  <option value="SLVK">Slovakia</option>
  <option value="SLVN">Slovenia</option>
  <option value="SOLO">Solomon Island</option>
  <option value="SOMA">Somalia</option>
  <option value="SAFR">South Africa</option>
  <option value="SKOR">South Korea</option>
  <option value="SPAI">Spain</option>
  <option value="SRIL">Sri Lanka</option>
  <option value="STHL">St Helena</option>
  <option value="STKN">St Kitts &amp; Nevis</option>
  <option value="STLU">St Lucia</option>
  <option value="STPM">St Pierre &amp; Miquelon</option>
  <option value="STVG">St Vincent &amp; The Grenadines</option>
  <option value="SUDA">Sudan</option>
  <option value="SURI">Suriname</option>
  <option value="SWAZ">Swaziland</option>
  <option value="SWED">Sweden</option>
  <option value="SWIT">Switzerland</option>
  <option value="SYRI">Syria</option>
  <option value="TAIW">Taiwan</option>
  <option value="TANZ">Tanzania</option>
  <option value="THAI">Thailand</option>
  <option value="TOGO">Togo</option>
  <option value="TONG">Tonga</option>
  <option value="TRIN">Trinidad &amp; Tobago</option>
  <option value="TUNI">Tunisia</option>
  <option value="TURK">Turkey</option>
  <option value="TURC">Turks &amp; Caicos Islands</option>
  <option value="UGAN">Uganda</option>
  <option value="UKRA">Ukraine</option>
  <option value="UAE">United Arab Emirates</option>
  <option value="URUG">Uruguay</option>
  <option value="UZBE">Uzbekistan</option>
  <option value="VATI">Vatican</option>
  <option value="VENE">Venezuela</option>
  <option value="VIET">Vietnam</option>
  <option value="WALE">Wales</option>
  <option value="WFIS">Wallis &amp; Futuna Islands</option>
  <option value="SAHA">Western Sahara</option>
  <option value="WSAM">Western Samoa</option>
  <option value="YEME">Yemen</option>
  <option value="YUGO">Yugoslavia</option>
  <option value="ZAIR">Zaire</option>
  <option value="ZAMB">Zambia</option>
  <option value="ZIMB">Zimbabwe</option>
  </select> </div>
</div>

score 1 · Answer 2 · answered Feb 02 '16 at 17:01

You can use the following code to achieve that. this (the select) contains an attribute options with all the option elements. It also has the current selectedIndex.

<select id="billcountry" class="form-control" name="bill_country" onchange="alert(this.options[this.selectedIndex].text); console.log(this);" tabindex="16">

Jsfiddle

score 1 · Accepted Answer · answered Feb 02 '16 at 17:06

1

Avoid using JavaScript inside and element.

You can try this:

var select = document.getElementById('billcountry');

select.addEventListener('change', function () {
    console.log(this.options[this.selectedIndex].text);
});

answered Feb 02 '16 at 17:06

nikoskip

1,860
1
21
38

I liked this option a lot. Thanks! – Derek Pollard Feb 02 '16 at 17:14

score 0 · Answer 4 · answered Feb 02 '16 at 17:25

You could use the element.querySelector['value='] to grab the option element by value and then grab the innerHTML property.

According to MDN, element.querySelector() "returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors." So it will have to search through each option element until it finds what it's looking for.

Here's an example:

HTML

<select name="color" id="color" onChange="handleChange.call(this)">
  <option value="blue">Blue</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
</select>

JS Change Function

function handleChange(){
  console.log(document.querySelector("[value=" + this.value + "]").innerHTML);
}

How do I grab the option text from a value

4 Answers4