Pobierz wybrany tekst opcji za pomocą JavaScript

124

Mam taką listę rozwijaną:

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

Jak uzyskać rzeczywisty tekst opcji zamiast wartości za pomocą JavaScript? Mogę uzyskać wartość za pomocą czegoś takiego:

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

Ale raczej niż 7122chcę cat.

techtheatre
źródło
2
stackoverflow.com/a/1085810/1339473 zobacz to, aby uzyskać dodatkową pomoc
QuokMoon
możliwy duplikat Jak uzyskać wybraną wartość listy rozwijanej za pomocą JavaScript? - mimo tytułu odpowiada na Twoje pytanie.
Felix Kling,

Odpowiedzi:

227

Wypróbuj opcje

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>

999k
źródło
28
Pierwsza zasada przy próbie użycia wyrażenia regularnego
szukaj
2
Czystsze jest pisanie po zmianie bez dużej litery c
Simon Baars
93

Zwykły JavaScript

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

jQuery:

$("#box1 option:selected").text();
sasi
źródło
1
@mplungjan Dlaczego nie skomentujesz tutaj, że jQuery używa .textContenti .innerTextdo .text()działania metod? To nie jest zgodne ze standardami, jest całkowicie błędne, ponieważ nie używa .text. Gdzie są głosy przeciw?
VisioN,
Gdzie jest innerHTML?
mplungjan,
@mplungjan To nie jest innerHTML, innerTextjest jeszcze gorzej.
VisioN,
Widzę opcję: {get: function (elem) {var val = elem.attributes.value; return! val || Val.specified? elem.value: elem.text;} in 1.9
mplungjan
15

Wszystkie te funkcje i przypadkowe rzeczy, myślę, że najlepiej jest to wykorzystać i zrobić to w ten sposób:

this.options[this.selectedIndex].text
klidifia
źródło
6

HTML:

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

JavaScript:

function myNewFunction(element) {
    var text = element.options[element.selectedIndex].text;
    // ...
}

DEMO: http://jsfiddle.net/6dkun/1/

Wizja
źródło
zobacz ten komentarz
Usunąłem
3

Posługiwać się -

$.trim($("select").children("option:selected").text())   //cat

Oto skrzypce - http://jsfiddle.net/eEGr3/

Ashwin
źródło
2
Gdzie pytanie dotyczy jQuery?
mplungjan,
1

Musisz uzyskać wewnętrzny kod HTML opcji, a nie jej wartość.

Użyj this.innerHTMLzamiast this.selectedIndex.

Edycja: Najpierw musisz pobrać element opcji, a następnie użyć innerHTML.

Użyj this.textzamiast this.selectedIndex.

Nick Pickering
źródło
To jest źle. Będzie grap innerHTMLod <select>elementu.
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

Ale :

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

A także to:

 <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>
Jean-Dadet Diasoluka
źródło
1

O ile wiem, są dwa rozwiązania.

oba, które po prostu wymagają użycia waniliowego javascript

1 wybrane opcje

demo na żywo

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 opcje

demo na żywo

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>


xgqfrms
źródło
-1

Wypróbuj poniższe:

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

Zobacz tutaj próbkę jsfiddle

ericosg
źródło
1
Dlaczego wszyscy nalegają na innerHTML ??? Użyj .text! I po co przekazywać to wszystko do funkcji. Po prostu
podaj
Ech, myślę, że mogłoby być lepiej / szybciej, ale chciałbym usłyszeć odparcie @ mplungjan.
Nick Pickering,
1
innerHTML to wygodna metoda wymyślona przez firmę Microsoft. Został następnie skopiowany do większej liczby przeglądarek, ale ponieważ a) nie jest to standardowe i b) nie możesz mieć html w opcji, nie ma absolutnie potrzeby, aby mylić problem, gdy opcja ma .value i .text
mplungjan
innerHTMLjest jednak bardzo wygodny ... Jestem gotów poświęcić w tym celu wszystkie standardy i prostotę. : P
Nick Pickering
1
osobiście używam .text () z jQuery i .innerHTML z czystym JS i pomaga mi uniknąć błędów przy mieszaniu frameworków, tylko z przyzwyczajenia. Wiem, że innerHTML działa we wszystkich przeglądarkach i to mnie cieszy :) och i określiłem oba parametry funkcji, aby OP mógł łatwiej odnosić się do mojego rozwiązania, nie ma innego powodu.
ericosg