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

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

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

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

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

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

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

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

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

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

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

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

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

для множественного выбранного значения в элементе #list.

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

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

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

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

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

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

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

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

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

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

Использовать:

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

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

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

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

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

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

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

Мне нужна была динамическая версия для множественного выбора, которая отображала бы то, что выбрано справа (если бы я читал и видел $(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>

1. Если на странице есть только один тег выбора, вы можете указать выбор внутри списка идентификаторов.

   jQuery("select option[value=2]").text();
   

2. Чтобы получить выделенный текст

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

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

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

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

element.options[element.selectedIndex].text

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

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

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

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

var e = $('select[title = "IntenalFieldName"] option:selected').text(); 

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

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

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

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

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

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

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

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

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

вы можете вызвать функцию так:

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

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

$("#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.info($("#list").find('option').filter('[value=2]').text());
    console.info($("#list").find('option[value=2]').text());
    console.info($("#list").children('option[value=2]').text());
    console.info($("#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>

Пытаться

[...list.options].find(o=> o.value=='2').text

let text = [...list.options].find(o=> o.value=='2').text;

console.info(text);

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

Попробуй это:

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