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

Question

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

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

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

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

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

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

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

Answer 4

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

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

Answer 5

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

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

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

Answer 6

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

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

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

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

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

Answer 7

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

element.options[element.selectedIndex].text

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

Answer 8

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

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

Answer 9

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

Answer 10

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

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