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


1234

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

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

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

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

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

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


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

Ответы:


1122

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

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

4
Спасибо за этот ник. Вот этот ответ расширен, если вы хотите получить значение динамически: var selectValue = document.getElementById ('list'). Value; var selectOption = $ ("# list option [value =" + selectValue + "]"). text (); /// хороший пример никф.
Кевин Флорида

283
@Kevin, в этом случае, вы можете использовать ответ ниже этого. $('#list option:selected').text()
Nickf

6
@nickf, и еще проще,$('#list').val()
Дерек 朕 會 功夫

36
@Derek, val () не будет давать текст опции, он будет давать ее значение, которое в некоторых случаях (многие, я смею говорить) не совпадает.
itsmequinn

Вы всегда должны использовать .trim()после, .text()так как некоторые браузеры могут иногда добавлять некоторые пробелы до и после текста, которые невидимы для пользователя, но могут привести к получению неправильных значений$("#list option[value='2']").text().trim()
Хасан АЛАМИ

1262

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

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

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

$("#list option:selected").text();

11
Чтобы получить значение вместо текста, вам нужно написать: - $ ("select # list"). Val (); Я знаю, что это не фактический ответ на заданный вопрос, но все же думал упомянуть этот момент для новичков, приходящих через Google.
жажда знаний

Я использую $ ("# list option: selected"). Text () и $ ("# list option: selected"). Attr ('value')
fullstacklife

Для получения выделенного текста (даже если вопрос не задавался об этом конкретно), этот метод лучше, потому что не нужно знать, что такое выбранное значение.
TheJerm

132

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

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

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

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

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

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


2
предположительно, это более эффективный способ сделать это в соответствии с WebStorm 8.
dbinott

2
Хотя этот ответ является проницательным и помог мне решить проблему, которая возникла у меня, к сожалению, он не дает правильного ответа на вопрос: обратите внимание, что
StubbornShowaGuy

109

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

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

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


11
Альтернатива этому: $ ("option: selected", this) .text ()
Doug S

Это лучший ответ, потому что он учитывает сложные сценарии, а не только статический html и простые события javascript.
oasisfleeting

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

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


37
  1. Если на странице есть только один тег select, вы можете указать select внутри id 'list'

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

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

24

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

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

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


19

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

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

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


Это определенно не правильно Обратите внимание, что здесь не спрашивают, как получить выбранное текстовое значение
Уэсли Смит,

17

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

$("#list :selected").text();

17
$(this).children(":selected").text()

К сожалению, это не работает, если у вас есть optgroupтег как дочерний элемент, selectи выбранная опция находится в этом optgroup. использование, $("#list option:selected").text();которое работает даже в этом случае
MartinM


13

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

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

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

10

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

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

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

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

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


8

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

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(); 

Твердый раствор. Извините, это здесь, в таком секретном месте. Возможно, вы захотите найти более заметное место, чтобы обеспечить это решение. Может быть, вы могли бы задать и ответить на свой вопрос?
Андрей Козак

4

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

element.options[element.selectedIndex].text

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


4

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

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

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

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

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



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>

2

Вы можете получить один из следующих способов

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

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

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

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

$(function(){    
    
    console.log($("#list").find('option').filter('[value=2]').text());
    console.log($("#list").find('option[value=2]').text());
    console.log($("#list").children('option[value=2]').text());
    console.log($("#list option[value='2']").text());
    
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select id='list'>
    <option value='1'>Option A</option>
    <option value='2'>Option B</option>
    <option value='3'>Option C</option>
</select>

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.