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

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

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

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

13.10.2008 04:06:34
Для этого периода времени используйте:$("#list option").filter(function () { return $(this).html() == "stuff"; }).val();
rook 15.08.2013 12:11:39
20 ОТВЕТОВ
РЕШЕНИЕ

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

$("#list option[value='2']").text()
1119
19.04.2020 11:14:35
Спасибо за этот ник. Вот этот ответ расширен, если вы хотите получить значение динамически: var selectValue = document.getElementById ('list'). Value; var selectOption = $ ("# list option [value =" + selectValue + "]"). text (); /// хороший пример nickf.
Kevin Florida 5.04.2011 13:48:10
@Kevin, в этом случае, вы можете использовать ответ ниже этого. $('#list option:selected').text()
nickf 5.04.2011 16:10:30
@nickf, и еще проще,$('#list').val()
Derek 朕會功夫 28.04.2012 23:38:13
@Derek, val () не будет давать текст опции, он будет давать ее значение, которое в некоторых случаях (многие, я смею говорить) не совпадает.
itsmequinn 10.01.2013 14:39:42
Вы должны всегда использовать .trim()после, .text()так как некоторые браузеры могут иногда добавлять некоторые пробелы до и после текста, которые невидимы для пользователя, но могут привести к получению неправильных значений$("#list option[value='2']").text().trim()
Hassan ALAMI 20.08.2019 08:52:58

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

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

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

23
13.10.2008 04:08:45

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

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

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

$("#list option:selected").text();
1261
30.12.2013 16:01:21
Чтобы получить значение вместо текста, вам нужно написать: - $ ("select # list"). Val (); Я знаю, что это не фактический ответ на заданный вопрос, но все же думал упомянуть этот момент для новичков, приходящих через Google.
Knowledge Craving 19.06.2010 20:50:18
Я использую $ ("# list option: selected"). Text () и $ ("# list option: selected"). Attr ('value')
fullstacklife 24.02.2011 17:10:18
Для получения выделенного текста (даже если вопрос не задавался об этом конкретно), этот метод лучше, потому что не нужно знать, что такое выбранное значение.
theJerm 12.09.2012 22:32:36
$("#list [value='2']").text();

оставьте пробел после селектора идентификатора.

13
8.06.2010 11:29:44
$("#list option:selected").each(function() {
   alert($(this).text());
});  

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

36
23.09.2011 13:40:19

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

$("#list :selected").text();
16
25.05.2011 09:42:40

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

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

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

109
25.05.2011 09:44:38
Альтернатива этому: $ ("option: selected", this) .text ()
Doug S 18.08.2013 20:05:28
Это лучший ответ, потому что он учитывает сложные сценарии, а не только статический html и простые события javascript.
oasisfleeting 13.05.2015 04:26:05

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

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

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

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

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

10
26.05.2011 19:04:13

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

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();
});
8
11.06.2012 16:06:20

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

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

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

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

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

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

131
29.11.2016 16:15:44
предположительно, это более эффективный способ сделать это в соответствии с WebStorm 8.
dbinott 1.10.2014 14:59:33
Хотя этот ответ является проницательным и помог мне решить проблему, которая возникла у меня, к сожалению, он не дает правильного ответа на вопрос: обратите внимание, что это не вопрос о том, как получить выбранное текстовое значение, а только одно из них, независимо от того, выбран ли он. или нет, в зависимости от значения атрибута.
StubbornShowaGuy 27.05.2016 00:40:47

Я хотел динамическую версию для выбора нескольких, которая будет отображать то, что выбрано справа (жаль, что я читал и видел $(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
11.06.2012 16:08:14
  1. Если на странице есть только один тег select, вы можете указать select внутри id 'list'

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

    jQuery("select option:selected").text();
37
19.08.2016 03:27:02

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

$("option[value='2']", "#list").text();
3
20.01.2013 14:57:54

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

element.options[element.selectedIndex].text

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

4
18.02.2013 21:50:55
$(this).children(":selected").text()
17
3.04.2013 11:21:19
К сожалению, это не работает, если у вас есть optgroupтег как дочерний элемент, selectи выбранная опция находится в этом optgroup. использование, $("#list option:selected").text();которое работает даже в этом случае
MartinM 2.03.2017 14:45:48

Я искал val по внутреннему имени поля вместо ID и пришел от Google к этому сообщению, которое помогло, но не нашло нужного мне решения, но я нашел решение, и вот оно:

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

var e = $('select[title="IntenalFieldName"] option:selected').text(); 
5
5.11.2013 21:57:29
Твердый раствор. Извините, это здесь, в таком секретном месте. Возможно, вы захотите найти более заметное место, чтобы обеспечить это решение. Может быть, вы могли бы задать и ответить на свой вопрос?
Andrew Kozak 30.12.2013 09:35:20

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

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

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

19
17.04.2015 16:37:28
Это определенно не правильно. Обратите внимание, что здесь не спрашивают, как получить выделенное текстовое значение
Wesley Smith 18.08.2016 23:39:34

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

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

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

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

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

4
23.05.2017 12:18:30

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

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

jQuery("select option:selected").text();
13
2.03.2017 10:49:56

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

$("#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>

2
8.05.2018 09:57:02