Dapatkan teks opsi yang dipilih dengan JavaScript


124

Saya memiliki daftar dropdown seperti ini:

<select id="box1">
<option value="98">dog</option>
<option value="7122">cat</option>
<option value="142">bird</option>
</select>

Bagaimana saya bisa mendapatkan teks opsi yang sebenarnya daripada nilainya menggunakan JavaScript? Saya bisa mendapatkan nilainya dengan sesuatu seperti:

<select id="box1" onChange="myNewFunction(this.selectedIndex);" >

Tapi daripada yang 7122kuinginkan cat.


2
stackoverflow.com/a/1085810/1339473 lihat ini untuk bantuan lebih lanjut
QuokMoon

kemungkinan duplikat Bagaimana cara mendapatkan nilai dropdownlist yang dipilih menggunakan JavaScript? - Terlepas dari judulnya, ini menjawab pertanyaan Anda.
Felix Kling

Jawaban:


226

Coba opsi

function myNewFunction(sel) {
  alert(sel.options[sel.selectedIndex].text);
}
<select id="box1" onChange="myNewFunction(this);">
  <option value="98">dog</option>
  <option value="7122">cat</option>
  <option value="142">bird</option>
</select>


28
Aturan pertama saat mencoba menggunakan regex — terus telusuri Stack Overflow sampai Anda melihat solusi yang tidak membutuhkan regex — cheers :)
Mirror318

2
Lebih bersih menulis onchange tanpa huruf kapital c
Simon Baars

93

JavaScript biasa

var sel = document.getElementById("box1");
var text= sel.options[sel.selectedIndex].text;

jQuery:

$("#box1 option:selected").text();

1
@mplungjan Mengapa Anda tidak berkomentar di sini bahwa jQuery menggunakan .textContentdan .innerTextuntuk .text()operasi metode? Ini tidak sesuai standar, itu benar-benar salah karena tidak digunakan .text. Di mana suara negatifnya?
VisioN

Di manakah innerHTML?
mplungjan

@mplungjan Tidak innerHTML, innerTextbahkan lebih buruk.
VisioN

Saya melihat opsi: {get: function (elem) {var val = elem.attributes.value; kembali! val || val.specified? elem.value: elem.text;} di 1.9
mplungjan

15

Semua fungsi dan hal acak ini, menurut saya yang terbaik adalah menggunakan ini, dan melakukannya seperti ini:

this.options[this.selectedIndex].text



1

Anda harus mendapatkan innerHTML dari opsi tersebut, dan bukan nilainya.

Gunakan this.innerHTMLsebagai ganti this.selectedIndex.

Edit: Anda harus mendapatkan elemen opsi terlebih dahulu dan kemudian menggunakan innerHTML.

Gunakan this.textsebagai ganti this.selectedIndex.


Ini salah. Ini akan menggambarkan elemen innerHTMLdari <select>.
VisioN

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

Tapi:

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

Dan juga ini:

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

1

Ada dua solusi, sejauh yang saya tahu.

keduanya hanya perlu menggunakan vanilla javascript

1 dipilihOpsi

demo langsung

const log = console.log;
const areaSelect = document.querySelector(`[id="area"]`);

areaSelect.addEventListener(`change`, (e) => {
  // log(`e.target`, e.target);
  const select = e.target;
  const value = select.value;
  const desc = select.selectedOptions[0].text;
  log(`option desc`, desc);
});
<div class="select-box clearfix">
  <label for="area">Area</label>
  <select id="area">
    <option value="101">A1</option>
    <option value="102">B2</option>
    <option value="103">C3</option>
  </select>
</div>

2 opsi

demo langsung

const log = console.log;
const areaSelect = document.querySelector(`[id="area"]`);

areaSelect.addEventListener(`change`, (e) => {
  // log(`e.target`, e.target);
  const select = e.target;
  const value = select.value;
  const desc = select.options[select.selectedIndex].text;
  log(`option desc`, desc);
});
<div class="select-box clearfix">
  <label for="area">Area</label>
  <select id="area">
    <option value="101">A1</option>
    <option value="102">B2</option>
    <option value="103">C3</option>
  </select>
</div>



-1

Coba di bawah ini:

myNewFunction = function(id, index) {
    var selection = document.getElementById(id);
    alert(selection.options[index].innerHTML);
};

Lihat di sini contoh jsfiddle


1
Mengapa semua orang bersikeras menggunakan innerHTML ??? Gunakan .text! Dan mengapa meneruskan semua hal itu ke fungsi. Cukup lewati (ini) dan minta fungsinya memutuskan apa yang akan digunakan
mplungjan

Eh, saya pikir mungkin lebih baik / lebih cepat tapi saya ingin mendengar bantahan @mplungjan.
Nick Pickering

1
innerHTML adalah metode praktis yang ditemukan oleh Microsoft. Itu kemudian disalin ke lebih banyak browser, tetapi karena a) itu tidak standar dan b) Anda tidak dapat memiliki html dalam opsi, sama sekali tidak perlu membingungkan masalah ketika opsi memiliki .value dan
.text

innerHTMLsangat nyaman ... Saya rela mengorbankan semua standar dan kesederhanaan untuk itu. : P
Nick Pickering

1
secara pribadi saya menggunakan .text () dengan jQuery dan .innerHTML dengan JS murni dan membantu saya menghindari kesalahan saat mencampur kerangka kerja, hanya karena kebiasaan. Saya tahu innerHTML berfungsi di semua browser dan itu membuat saya senang :) oh dan saya menentukan kedua parameter fungsi sehingga OP dapat lebih mudah berhubungan dengan solusi saya, tidak ada alasan lain.
ericosg
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.