Як отримати виділений текст вікна вибору Javascript

79

Це все працює чудово

<select name="selectbox" onchange="alert(this.value)">

Але я хочу виділити текст. Я намагався таким чином

<select name="selectbox" onchange="alert(this.text)">

Він показує невизначений. Я знайшов, як використовувати DOM для отримання тексту. Але я хочу зробити це таким чином, я маю на увазі, що використовую саме this.value.

javascript select

— Ааджахід
джерело

126

this.options[this.selectedIndex].innerHTML

повинен надати вам "відображений" текст вибраного елемента. this.valueяк ви вже сказали, просто надає значення valueатрибута.

— Делан Азабані
джерело

6

Мені це не подобається. Хоча я впевнений, що це працює в сучасних браузерах, це дивна суміш коду на основі елементів DOM та коду маніпуляцій із старими стилями. optionsповертає список Optionоб'єктів, які, я не впевнений, де-небудь вказані як те саме, що і <option>елементи. Краще використовувати заслужене часом textмайно вибраного Option, яке гарантовано спрацює.

— Тім Даун

Тім, Optionоб'єкти - це те саме, що HTMLOptionElementоб'єкти. Якщо ви заперечуєте проти використання options, ви можете альтернативно використовувати childrenабо childNodesзамість цього (не пам'ятаю, який саме; я думаю, що вони обидва працюють)

— Делан Азабані,

1

Я думаю, ви трохи неправильно розумієте: я повністю прихильник використання options, але Optionоб'єкти передують HTMLOptionElementоб'єктам, і я не бачив жодної специфікації, яка б передбачала, що це має бути Optionі HTMLOptionElementповинно бути одним і тим же, хоча вони цілком можуть бути у більшості браузерів, що підтримують обидва. Моя думка полягає в тому, що було б безпечніше не поєднувати два стилі. Отже, я віддав би перевагу this.options[this.selectedIndex].textабо заснованій на вузлі речі selectedIndex, що ускладнюється необхідністю фільтрувати текстові вузли пробілів в IE.

— Тім Даун

Це дуже хороший момент. Просто з цікавості, якщо у вас є нетекстові вузли всередині вузлів опцій, textповертає innerHTMLчи просто всі текстові вузли разом?

— Delan Azabani

1

Господи, припиніть голосувати за некомпетентність! Одед має правильну відповідь. Наскільки важко дослідити концепцію DOM? > __>

— Джон

68

Для того, щоб отримати значення вибраного предмета, ви можете зробити наступне:

this.options[this.selectedIndex].text

Тут здійснюється доступ до різних optionsз вибраних, і SelectedIndexвикористовується для вибору вибраного, потім textздійснюється доступ до нього.

Детальніше про вибраний DOM читайте тут .

— Од
джерело

1

this.options[this.selectedIndex].valueце точно те саме, що this.value, вибачте.

— Delan Azabani

Коли я використовую this.options [this.SelectedIndex]. Консоль помилки .text каже - Помилка: this.options [this.SelectedIndex] не визначено

— Aajahid

3

ШАКТІ: Це тому, що це selectedIndexшвидше ніж SelectedIndex.

— Тім Даун

2

Або просто для розваги this.selectedOptions[0].text(з очевидними розширеннями, якщо у вас є мультиселект).

— jorffin

37

Спробуйте цей код:

$("#YourSelect>option:selected").html()

— Андре Мората
джерело

Тож спасибі! це повертає значення вибраного елемента в

— комбінованому списку

.text () фактично повертає вибраний текст

— Windrider 03.03.20

33

Просто використовуйте

$('#SelectBoxId option:selected').text(); Для отримання тексту у списку

$('#SelectBoxId').val(); Для отримання вибраного значення індексу

— Марвіл Джой
джерело

2

Хоча це чудово працює для jQuery, OP лише перерахував javascript як оригінальний тег. Тим не менше, +1, оскільки стільки людей використовує jQuery.

— Sablefoste

1

Я знаю, що тут ніхто не просить рішення jQuery, але, можливо, варто згадати, що за допомогою jQuery ви можете просто попросити:$('#selectorid').val()

— Міхіель
джерело

0

Якщо ви хочете отримати значення, ви можете використовувати цей код для елемента select з id = "selectBox"

let myValue = document.querySelector("#selectBox").value;

Якщо ви хочете отримати текст, ви можете використовувати цей код

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

— Майкл Альберс
джерело