Как получить выделенный текст в поле выбора 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;

— Майкл Альберс
источник