JQuery получить конкретный текст тега опции

1095

Хорошо, скажу, что у меня есть это:

<select id='list'>
    <option value='1'>Option A</option>
    <option value='2'>Option B</option>
    <option value='3'>Option C</option>
</select>

Как бы выглядел селектор, если бы я хотел получить "Option B", когда у меня есть значение "2"?

Обратите внимание, что это не спрашивает, как получить выбранное текстовое значение, но только любое из них, независимо от того, выбрано или нет, в зависимости от атрибута value. Я пробовал:

$("#list[value='2']").text();

Но он не работает.

  • 0
    Для этого периода времени используйте: $("#list option").filter(function () { return $(this).html() == "stuff"; }).val();
Теги:
drop-down-menu
jquery-selectors

19 ответов

1068
Лучший ответ

Он ищет элемент с id list, который имеет свойство value, равное 2. То, что вы хотите, это дочерний option list.

$("#list option[value='2']").text()
  • 4
    Спасибо за этот ник. Вот этот ответ расширен, если вы хотите получить значение динамически: var selectValue = document.getElementById ('list'). Value; var selectOption = $ ("# list option [value =" + selectValue + "]"). text (); /// хороший пример nickf.
  • 282
    @Kevin, в этом случае, вы можете использовать ответ ниже этого. $('#list option:selected').text()
Показать ещё 2 комментария
1285

Если вы хотите получить опцию со значением 2, используйте

$("#list option[value='2']").text();

Если вы хотите получить тот вариант, который выбран в данный момент, используйте

$("#list option:selected").text();
  • 11
    Чтобы получить значение вместо текста, вам нужно написать: - $ ("select # list"). Val (); Я знаю, что это не фактический ответ на заданный вопрос, но все же думал упомянуть этот момент для новичков, приходящих через Google.
  • 0
    Я использую $ ("# list option: selected"). Text () и $ ("# list option: selected"). Attr ('value')
Показать ещё 1 комментарий
112

Это отлично сработало для меня, я искал способ отправить два разных значения с параметрами, сгенерированными MySQL, и следующее является общим и динамическим:

$(this).find("option:selected").text();

Как упоминалось в одном из комментариев. С этим я смог создать динамическую функцию, которая работает со всеми моими блоками выбора, которые я хочу получить как значениями, так и значением параметра и текстом.

Несколько дней назад я заметил, что при обновлении jQuery с 1,6 до 1,9 сайта я использовал этот код, эта работа перестала работать... возможно, это был конфликт с другим фрагментом кода... в любом случае решение заключалось в удалении вариант из вызова find():

$(this).find(":selected").text();

Это было мое решение... используйте его, только если у вас возникли проблемы после обновления jQuery.

  • 2
    предположительно, это более эффективный способ сделать это в соответствии с WebStorm 8.
  • 2
    Хотя этот ответ является проницательным и помог мне решить проблему, которая возникла у меня, к сожалению, он не дает правильного ответа на вопрос: обратите внимание, что здесь спрашивается не о том, как получить выбранное текстовое значение, а только о любом из них, независимо от того, выбрано ли оно. или нет, в зависимости от значения атрибута.
106

Основываясь на исходном HTML, опубликованном Паоло, я придумал следующее.

$("#list").change(function() {
    alert($(this).find("option:selected").text()+' clicked!');
});

Он был протестирован для работы в Internet Explorer и Firefox.

  • 11
    Альтернатива этому: $ ("option: selected", this) .text ()
  • 0
    Это лучший ответ, потому что он учитывает сложные сценарии, а не только статический html и простые события javascript.
35
  • Если на странице есть только один тег select, вы можете указать выбор внутри id 'list'

    jQuery("select option[value=2]").text();
    
  • Чтобы получить выделенный текст

    jQuery("select option:selected").text();
    
33
$("#list option:selected").each(function() {
   alert($(this).text());
});  

для нескольких выбранных значений в элементе #list.

20

Попробуйте следующее:

$("#list option[value=2]").text();

Причина, по которой ваш исходный фрагмент не работал, заключается в том, что теги OPTION являются дочерними элементами вашего тега SELECT, который имеет id list.

  • 0
    $ ('# list option [value = "2"]'). text (); // правильный селектор
19

Это старый вопрос, который не был обновлен через некоторое время, правильный способ сделать это теперь будет использовать

$("#action").on('change',function() {
    alert($(this).find("option:selected").text()+' clicked!');
});

Надеюсь, это поможет: -)

  • 0
    Это определенно не правильно. Обратите внимание, что здесь не спрашивают, как получить выбранное значение текста.
16

Я хотел получить выбранный ярлык. Это работало для меня в jQuery 1.5.1.

$("#list :selected").text();
15
$(this).children(":selected").text()
  • 0
    Это работает лучше всего в Jquery сейчас дней.
  • 0
    К сожалению, это не работает, если у вас есть тег optgroup как дочерний элемент вашего select и выбранный параметр находится в этой optgroup . используйте $("#list option:selected").text(); который работает даже в этом случае
13
$("#list [value='2']").text();

оставить пробел после селектора id.

12

Вы можете получить выбранный текст с помощью функции .text();

вы можете вызвать функцию следующим образом:

jQuery("select option:selected").text();
9

Во время "циклизации" через динамически создаваемые элементы select с .each(function()...): $("option:selected").text(); и $(this + " option:selected").text() не вернули выбранный текст опции - вместо этого он был равен нулю.

Но решение Питера Мортенсена работало:

$(this).find("option:selected").text();

Я не знаю, почему обычный способ не удается в .each() (возможно, моя собственная ошибка), но спасибо, Питер. Я знаю, что это был не оригинальный вопрос, а упоминание об этом "для новичков, которые появляются через Google".

Я бы начал с $('#list option:selected").each(), за исключением того, что мне нужно было захватить вещи из элемента select.

7

Использование:

function selected_state(){
    jQuery("#list option").each(function(){
        if(jQuery(this).val() == "2"){
            jQuery(this).attr("selected","selected");
            return false;
        }
    });
}

jQuery(document).ready(function(){
    selected_state();
});
5

Я искал получение val по имени внутреннего поля вместо ID и пришел из google в этот пост, который помог, но не нашел нужное мне решение, но я получил решение, и вот оно:

Таким образом, это может помочь кому-то искать выбранное значение с внутренним именем поля вместо использования длинного идентификатора для списков SharePoint:

var e = $('select[title="IntenalFieldName"] option:selected').text(); 
  • 0
    Твердый раствор. Извините, это здесь, в таком секретном месте. Возможно, вы захотите найти более заметное место, чтобы обеспечить это решение. Может быть, вы могли бы задать и ответить на свой вопрос?
4

Совет: вы можете использовать код ниже, если ваше значение динамическое:

$("#list option[value='"+aDynamicValue+"']").text();

Или (лучший стиль)

$("#list option").filter(function() {
     return this.value === aDynamicValue;
}).text();

Как упоминалось в jQuery получить конкретный текст тега опции и поставить динамическую переменную в значение

4

Мне нужен был этот ответ, поскольку я имел дело с динамически отличным объектом, а другие методы здесь не работали:

element.options[element.selectedIndex].text

Это, конечно, использует объект DOM вместо разбора его HTML с помощью nodeValue, childNodes и т.д.

3

В качестве альтернативного решения вы также можете использовать контекстную часть селектора jQuery, чтобы найти <option> элемент с value="2" внутри выпадающего списка:

$("option[value='2']", "#list").text();
2

Мне нужна динамическая версия для множественного выбора, которая отображает то, что выбрано справа (желательно, чтобы я читал и видел $(this).find... ранее):

<script type="text/javascript">
    $(document).ready(function(){
        $("select[showChoices]").each(function(){
            $(this).after("<span id='spn"+$(this).attr('id')+"' style='border:1px solid black;width:100px;float:left;white-space:nowrap;'>&nbsp;</span>");
            doShowSelected($(this).attr('id'));//shows initial selections
        }).change(function(){
            doShowSelected($(this).attr('id'));//as user makes new selections
        });
    });
    function doShowSelected(inId){
        var aryVals=$("#"+inId).val();
        var selText="";
        for(var i=0; i<aryVals.length; i++){
            var o="#"+inId+" option[value='"+aryVals[i]+"']";
            selText+=$(o).text()+"<br>";
        }
        $("#spn"+inId).html(selText);
    }
</script>
<select style="float:left;" multiple="true" id="mySelect" name="mySelect" showChoices="true">
    <option selected="selected" value=1>opt 1</option>
    <option selected="selected" value=2>opt 2</option>
    <option value=3>opt 3</option>
    <option value=4>opt 4</option>
</select>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню