Как получить доступ к «отображаемому» тексту опции поля выбора из DOM?

Question

С учетом следующего HTML:

<select name="my_dropdown" id="my_dropdown">
<option value="1">displayed text 1</option>
</select>

Как мне получить строку "отображаемый текст 1", используя Javascript / DOM?

Answer 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;
    }
}

Answer 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;

Answer 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;

Answer 4

Предполагая, что вы немного изменили свой код, чтобы иметь идентификатор / класс, и использовали jQuery, вы можете получить что-то вроде следующего. Появится предупреждение для каждой опции с текстом опции. Вы, вероятно, не захотите предупреждать обо всем тексте, но он иллюстрирует, как получить текст в первую очередь:

$('select#id option').each(function() {
  alert($(this).text());
});

Если вы используете класс вместо идентификатора, то вам просто нужно изменить «select # id» на «select.class». Если вы не хотите добавлять класс / идентификатор, есть другие способы выбора.

Я оставлю выяснение этих путей, если вы хотите пойти по этому пути как занятие для читателя.

Answer 5

Отображаемый текст является дочерним узлом узла параметров. Вы можете использовать:

myOptionNode.childNodes[0];

для доступа к нему, при условии, что текстовый узел - это единственное, что есть внутри опции (а не другие теги).

РЕДАКТИРОВАТЬ: Ах да, как уже упоминалось, я совершенно забыл о:

myOptionNode.text;

Answer 6

Если бы вы использовали Прототип , вы могли бы получить это так:

$$('#my_dropdown option[value=1]').each( function(elem){
                alert(elem.text);
            });

Выше используется CSS-селектор, который говорит, что найти все option теги с value = "1" внутри элемента, который имеет id = "my_dropdown" .