如何从值中获取选项文本

Question

所以我有这段HT​​ML代码：

<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>

正如您所看到的，当<select>的值发生变化时，新值将传递给当前的警报。

我已经全神贯注地寻找解决方案（没有jQuery只根据值获取选项text。

因此，如果select已更改为值USA，则我尝试（并失败）获取United States

字样

关于如何在不使用jQuery的情况下有效地解决这个问题的想法，或者必须循环遍历每个选项并检查其值，然后在匹配的情况下抓取它innerHTML？

**编辑：**我正在搜索实际的TEXT，而不是VALUE。为什么这不重复。

Answer 1

您可以使用它来获取所选元素的文本：

this[this.selectedIndex].innerHTML

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用以下代码来实现此目的。 this（select）包含一个带有所有选项元素的属性options。它还有当前selectedIndex。

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

<强> Jsfiddle

Answer 3

避免在内部和元素中使用JavaScript。

你可以试试这个：

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

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

Answer 4

您可以使用element.querySelector['value=']按值获取选项元素，然后获取innerHTML属性。

根据MDN，element.querySelector()“返回第一个元素，该元素是调用它的元素的后代，它与指定的选择器组匹配。”因此，它必须搜索每个选项元素，直到找到它正在寻找的内容。

以下是一个例子：

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改变功能

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