jQuery отримати конкретний текст тегу опцій

Добре, скажіть, у мене це:

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

Як виглядатиме селектор, якби я хотів отримати "Варіант В", коли у мене є значення "2"?

Зауважте, що це не питання про те, як отримати вибране текстове значення, а лише будь-яке з них, вибране чи ні, залежно від атрибуту значення. Я намагався:

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

Але це не працює.

Він шукає елемент з id, у listякого властивість valueдорівнює 2.
Що ви хочете, це optionдитина list:

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

Якщо ви хочете отримати опцію зі значенням 2, використовуйте

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

Якщо ви хочете отримати будь-який варіант, обраний на даний момент, скористайтеся

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

Це прекрасно працювало для мене, я шукав спосіб надіслати два різних значення з параметрами, згенерованими MySQL, і наступне є загальним та динамічним:

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

Як згадується в одному з коментарів. Завдяки цьому я зміг створити динамічну функцію, яка працює з усіма моїми вікнами вибору, що я хочу отримати як значення, так і значення параметра та текст.

Кілька днів тому я помітив, що при оновленні jQuery з 1.6 на 1.9 я використовував цей код, ця зупинка роботи ... ймовірно, була конфлікт з іншим фрагментом коду ... все одно, рішенням було видалити варіант find () call:

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

Це було моє рішення ... використовуйте його, лише якщо у вас виникли проблеми після оновлення jQuery.

На основі оригіналу HTML, опублікованого Паоло, я придумав таке.

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

Він перевірений для роботи на Internet Explorer та Firefox.

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

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

1. Якщо на сторінці є лише один тег вибору, ви можете вказати виділити всередині id 'list'

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

2. Щоб отримати вибраний текст

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

Спробуйте наступне:

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

Причина, по якій ваш оригінальний фрагмент не працював, полягає в тому, що ваші OPTIONтеги є дітьми до вашого SELECTтегу, який має id list.

Це старе запитання, яке не оновлювалося протягом певного часу, правильним способом цього зараз було б користуватися

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

Я сподіваюся, що це допомагає :-)

Я хотів отримати вибрану етикетку. Це працювало для мене в jQuery 1.5.1.

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

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

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

залиште пробіл після селектора id.

Ви можете отримати вибраний текст опції за допомогою функції .text();

Ви можете викликати функцію так:

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

Під час "циклу" через динамічно створені виділені елементи з .each (функцією () ...): $("option:selected").text();і $(this + " option:selected").text()не повертає вибраний текст опції - натомість він був нульовим.

Але рішення Пітера Мортенсена спрацювало:

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

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

Я б почав з $('#list option:selected").each()того, що мені потрібно було також взяти речі з елемента вибору.

Використання:

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

Я шукав вал за назвою внутрішнього поля замість ідентифікатора і прийшов від google до цієї публікації, яка допомагає, але не знайшла потрібного рішення, але я отримала рішення, і ось воно:

Тож це може допомогти тому, хто шукає вибране значення із внутрішнім іменем поля замість того, щоб використовувати довгий ідентифікатор для списків SharePoint:

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

Ця відповідь мені була потрібна, оскільки я мав справу з об'єктом, який динамічно кидається, а інші методи тут, схоже, не спрацювали:

element.options[element.selectedIndex].text

Звичайно, використовується об'єкт DOM замість того, щоб проаналізувати його HTML за допомогою nodeValue, childNodes тощо.

Порада: ви можете використовувати код нижче, якщо ваше значення динамічне:

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

Або (кращий стиль)

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

Як згадується в jQuery, отримайте текст тегів конкретного параметра та розміщення динамічної змінної до значення

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

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

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

Ви можете отримати один із наступних способів

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