#javascript #dom
Вопрос:
Учитывая следующий HTML:
<select name="my_dropdown" id="my_dropdown">
<option value="1">displayed text 1</option>
</select>
Как мне захватить строку «отображаемый текст 1» с помощью Javascript/DOM?
Ответ №1:
var sel = document.getElementById("my_dropdown");
//get the selected option
var selectedText = sel.options[sel.selectedIndex].text;
//or get the first option
var optionText = sel.options[0].text;
//or get the option with value="1"
for(var i=0; i<sel.options.length; i ){
if(sel.options[i].value == "1"){
var valueIsOneText = sel.options[i].text;
}
}
Комментарии:
1. это при условии, что в поле выбора есть идентификационный тег.
2. Этот код предназначен для выбранного параметра, хотя атрибут .text будет работать для любого из параметров (выбранных или нет), как только вы получите их из списка параметров [].
3. @Лиам — Круто. Когда я оставлял комментарий, там не было удостоверения личности.
Ответ №2:
var mySelect = document.forms["my_form"].my_dropdown;
// or if you select has a id
var mySelect = document.getElementById("my_dropdown");
var text = mySelect.options[mySelect.selectedIndex].text;
Комментарии:
1. Опять же, приведенный здесь пример кода предполагает, что ему нужна выбранная опция. В его примере есть только один вариант, так что это сработает, но в общем случае можно было бы указать какой-то другой индекс для опций[].
2. что ж, это правда, но начало темы не определило начальную ситуацию. Я предположил, что он хочет получить текст текущего выбранного параметра. Если ему нужен текст опции и он знает только значение, ему придется использовать цикл. Способ доступа тот же самый.
3. Предположение верно: я действительно хотел выбрать выбранный вариант, но мне следовало так и сказать.
Ответ №3:
Предполагая, что вам нужен текст выбранного параметра:
var select = document.getElementById('my_dropdown');
for(var i = 0; i < select.options.length; i ) {
if(select.options[i].selected) {
break;
}
}
var selectText = select.options[i].text;
В Прототипе:
var selectText = $('#my_dropdown option[selected]')[0].text;
Редактировать: И jQuery для полноты картины (при условии, что поддержка CSS-селектора jQuery примерно эквивалентна поддержке прототипа):
var selectText = $('#my_dropdown option[selected]').get(0).text;
Ответ №4:
Отображаемый текст является дочерним узлом узла опции. Вы можете использовать:
myOptionNode.childNodes[0];
чтобы получить к нему доступ, предположим, что текстовый узел-это единственное, что находится внутри опции (а не другие теги).
РЕДАКТИРОВАТЬ: О да, как упоминали другие, я совершенно забыл о:
myOptionNode.text;
Комментарии:
1. Какой еще контент, по вашему мнению, был бы внутри опции ? -) Просто недопустимо класть внутрь что-либо еще! -)
2. Это правда, это неверно, но я не проверял это, поэтому я не уверен, что произойдет, если, например, вы поместите <span>опцию вн утри. Браузеры иногда позволят вам избежать неприятных вещей.
Ответ №5:
Предполагая, что вы немного изменили свой код, чтобы иметь идентификатор / класс, и использовали jQuery, вы могли бы получить что-то вроде следующего. Он выдаст предупреждение для каждого параметра с текстом этого параметра. Вы, вероятно, не захотите предупреждать обо всем тексте, но это в первую очередь показывает, как добраться до текста:
$("выберите опцию#id").каждая(функция() {
предупреждение($(это).текст ());
});
Если вы используете класс вместо идентификатора, то вам просто нужно будет изменить «select#id» на «select.class». Если вы не хотите добавлять класс/идентификатор, есть другие способы получить доступ к выбору.
Я оставляю выяснение этих путей, если вы хотите пойти по этому пути в качестве занятия для читателя.
Ответ №6:
Если бы вы использовали прототип, вы могли бы сделать это так:
$('#my_dropdown option[value=1]').each( function(elem){
alert(elem.text);
});
Выше используется селектор CSS, который говорит найти все теги опций со значением=»1″, которые находятся внутри элемента с идентификатором=»my_dropdown».