Получить выбранный текст опции с помощью JavaScript


125

У меня есть выпадающий список вроде этого:

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

Как я могу получить фактический текст параметра, а не значение, используя JavaScript? Я могу получить значение примерно так:

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

Но скорее, чем 7122хочу cat.


2
stackoverflow.com/a/1085810/1339473 см. это для получения дополнительной помощи
QuokMoon

возможный дубликат Как получить выбранное значение из выпадающего списка с помощью JavaScript? - несмотря на название, он отвечает на ваш вопрос.
Феликс Клинг,

Возможный дубликат получения текста выбранного <option> в элементе <select>
totymedli

Ответы:


228

Попробуйте варианты

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
Первое правило при попытке использовать регулярное выражение - продолжайте искать Stack Overflow, пока не увидите решение, которое не требует регулярного выражения - ура :)
Mirror318 03

2
Более аккуратно писать onchange без заглавной c
Саймон Баарс

94

Обычный JavaScript

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

JQuery:

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

1
@mplungjan Почему вы не прокомментируете здесь, что jQuery использует .textContentи .innerTextдля работы .text()метода? Это не по стандартам, это совершенно неправильно, потому что им не пользуются .text. Где голоса против?
VisioN

Где внутренний HTML?
mplungjan

@mplungjan Нет innerHTML, innerTextдаже хуже.
VisioN

Я вижу вариант: {get: function (elem) {var val = elem.attributes.value; return! val || val.specified? elem.value: elem.text;} в 1.9
mplungjan

15

Все эти функции и случайные вещи, я думаю, лучше всего использовать это и делать это так:

this.options[this.selectedIndex].text



1

Вам нужно получить innerHTML параметра, а не его значение.

Используйте this.innerHTMLвместо this.selectedIndex.

Изменить: сначала вам нужно получить элемент option, а затем использовать innerHTML.

Используйте this.textвместо this.selectedIndex.


Это не верно. Он грейферы innerHTMLиз <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

Но :

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

А также это:

 <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

Насколько я знаю, есть два решения.

и то, и другое просто нужно использовать ванильный javascript

1 selectedOptions

живая демонстрация

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 варианта

живая демонстрация

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

Попробуйте следующее:

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

См. Здесь образец jsfiddle


1
Почему все настаивают на innerHTML ??? Используйте .text! И зачем передавать все это функции. Просто передайте (это), и
пусть

Эх, я думаю, что это могло бы быть лучше / быстрее, но я хотел бы услышать опровержение @ mplungjan.
Ник Пикеринг,

1
innerHTML - это удобный метод, изобретенный Microsoft. Затем он был скопирован в другие браузеры, но поскольку а) он не является стандартным и б) у вас не может быть html в параметре, нет никакой необходимости
вводить

innerHTMLэто так удобно ... Ради этого я готов пожертвовать всеми стандартами и простотой. : P
Ник Пикеринг

1
лично я использую .text () с jQuery и .innerHTML с чистым JS и помогает мне избежать ошибок при смешивании фреймворков, только по привычке. Я знаю, что innerHTML работает во всех браузерах, и это меня радует :) о, и я указал оба параметра функции, чтобы OP мог легче относиться к моему решению, без другой причины.
ericosg
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.