Как получить выделенный текст в поле выбора Javascript

79

Эта штука отлично работает 

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

Но я хочу выделить текст. Я пробовал таким способом

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

Он показывает undefined. Я нашел, как использовать DOM для получения текста. Но я хочу сделать это таким образом, я имею в виду, что хочу использовать только this.value.

javascript select Ааджахид
источник

Ответы:

126 
this.options[this.selectedIndex].innerHTML

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

Делан Азабани
источник
6
Мне это не нравится. Хотя я уверен, что он работает в текущих браузерах, это странная смесь кода, основанного на элементах DOM, и кода манипулирования формами в старом стиле. optionsвозвращает список Optionобъектов, которые, я не уверен, нигде указаны как то же самое, что и <option>элементы. Лучше использовать проверенное временем textсвойство выбранного Option, которое гарантированно заработает.
Tim Down
Тим, Optionобъекты такие же, как HTMLOptionElementобъекты. Если вы возражаете против использования options, вы можете в качестве альтернативы использовать childrenили childNodesвместо него (не могу точно вспомнить, какой из них; я думаю, что они оба работают)
Делан Азабани
1
Я думаю, вы немного неправильно поняли: я полностью поддерживаю использование options, но Optionобъекты предшествуют HTMLOptionElementобъектам, и я не видел спецификации, которая требует этого Optionи HTMLOptionElementдолжна быть одним и тем же, даже если они вполне могут быть в большинстве браузеров, поддерживающих оба. Я считаю, что было бы безопаснее не смешивать эти два стиля. Итак, я бы предпочел this.options[this.selectedIndex].textили основанную на узлах вещь selectedIndex, которая усложняется необходимостью отфильтровывать текстовые узлы с пробелами в IE.
Tim Down
Это очень хороший момент. Просто из любопытства, если у вас есть нетекстовые узлы внутри опционных узлов, textвозвращает ли innerHTMLили все текстовые узлы вместе?
Delan Azabani 05
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.
Tim Down
2
Или просто для удовольствия this.selectedOptions[0].text(с очевидными расширениями, если у вас есть множественный выбор).
ruffin
37

Пожалуйста, попробуйте этот код:

$("#YourSelect>option:selected").html()
Андре Мората
источник
Тогда спасибо! это возвращает значение выбранного элемента в
поле со
.text () фактически возвращает выбранный текст
Windrider
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;
Майкл Альберс
источник