Отримайте вибраний текст із випадаючого списку (виберіть поле) за допомогою jQuery


2302

Як я можу отримати вибраний текст (а не вибране значення) зі спадного списку в jQuery?


12
Всього два мої центи: "ASP" випадаюче не особливе; це просто гарний старий HTML. :-)
ankush981

Можна посилатися на цю статтю: javascriptstutorial.com/blog/…
Діліп Кумар Ядав

для ванільного яваскрипт способом, см stackoverflow.com/a/5947/32453
rogerdpack

Просто $ (це) .prop ('вибрано', правда); замінено .att to .prop, він працював для всіх браузерів
Шахід Хуссейн Аббасі

Відповіді:


3773
$("#yourdropdownid option:selected").text();

207
Я думаю, що це має бути, $("#yourdropdownid").children("option").filter(":selected").text()оскільки () повертає булевий рівень відповідності об'єкта селектору чи ні.
MHollis

42
Я другий коментар про це () повернення булену; альтернативно, використовуйте наступну невелику зміну: $ ('# yourdropdownid'). children ("опція: вибрано"). text ();
scubbo

25
@ DT3 перевірено is("selected").text()повертаєтьсяTypeError: Object false has no method 'text'
ianace

96
$('select').children(':selected')це найшвидший спосіб: jsperf.com/get-selected-option-text
Simon

3
$ ("# IdSelect"). Діти ("опція: вибрано"). Text ()
JD - DC TECH

266

Спробуйте це:

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

Для випадаючого меню ASP.NET ви можете скористатися таким селектором:

$("[id*='MyDropDownId'] :selected")

Версія ASP.NET тут - єдиний Jquery, який працює з asp.net для мене, тому я згоден на це. Цей: ( '$ ("# yourdropdownid опція: вибрано"). Text ();' не працював на сторінці asp.net за допомогою головної сторінки.
netfed

5
це не працює, оскільки основні сторінки asp.net викидають випадкові символи перед селектором. Технічно шукає щось на кшталт("#ct0001yourdropdownid)
CSharper


1
@CSharper - Я думаю, що сказати, що ASP.NET викидає випадкових символів, є досить оманливим. Вони взагалі не випадкові, вони структурні і дотримуються суворих правил (заснованих на таких речах, як ви ставите IDна свій контроль, а якщо ні, то на основі індексу, де вони знаходяться в поточному рівні дерева тощо) )
freefaller

Привіт, як це зробити у рядку / клітинці таблиці, як ти знаєш, який із спаду зі столу, особливо в ASP MVC 5
трансформатор

215

Відповіді, розміщені тут, наприклад,

$('#yourdropdownid option:selected').text();

не працювало для мене, але це зробило:

$('#yourdropdownid').find('option:selected').text();

Це, можливо, старіша версія jQuery.


7
Не ненавиджу цю відповідь. Використання ключового слова "знайти" зробило для мене трюк. Я виходив із зовсім іншого контексту.
ROFLwTIME

5
опціональна частина вам взагалі не потрібна, як вона має на увазі вибране .. просто використовуючи $ ('# yourdropdownid: selected'). text (); буде добре працювати
Dss

jquery-1.10.2.min, цей працював для мене, а не для інших.
кубілай

Популярна відповідь працює, але мені вона потрібна була вже за отриманою посиланням на вибір, тому це найкраща відповідь для мене
Грем

102

Якщо у вас вже є спадний список доступний у змінній, це для мене працює:

$("option:selected", myVar).text()

Інші відповіді на це питання мені допомогли, але в кінцевому підсумку вибрана нитка форуму jQuery $ (це + "варіант: вибрано"). Вибраний варіант attr ("rel") не працює в IE найбільше.

Оновлення: виправлено вищезазначене посилання


67

Це працює для мене

$("#dropdownid").change(function() {
    alert($(this).find("option:selected").text());
});

Якщо елемент створюється динамічно

$(document).on("change", "#dropdownid", function() {
    alert($(this).find("option:selected").text());
});


55

$("#DropDownID").val() дасть вибране значення індексу.


37
Не зовсім відповідь на питання, але була корисною для мене. Питання хоче обраного тексту.
Петро

54

Це працює для мене:

$('#yourdropdownid').find('option:selected').text();

Версія jQuery : 1.9.1


3
Це працювало для мене, тому що на changeзаході я зараз можу використовувати $(this).find('option:selected').text()текст, щоб отримати текст.
Timo002

$(this).children(':selected').text()також працював би. @ Timo002
Містер Мак

42

Для тексту вибраного елемента використовуйте:

$('select[name="thegivenname"] option:selected').text();

Для значення вибраного елемента використовуйте:

$('select[name="thegivenname"] option:selected').val();

33

Різні способи

1. $("#myselect option:selected").text();

2. $("#myselect :selected").text();

3. $("#myselect").children(":selected").text();

4. $("#myselect").find(":selected").text();

31
$("#dropdownID").change(function(){
  alert($('option:selected', $(this)).text());
});

це те, чого я очікував $(this) після дзвінка в аякс
Шантарам Тупе

Ви також можете зробити $ ("option: selected", this) .text (), не загортаючи це в об'єкт JQuery.
Doug F

28

Використовуй це

const select = document.getElementById("yourSelectId");

const selectedIndex = select.selectedIndex;
const selectedValue = select.value;
const selectedText = select.options[selectedIndex].text;   

Потім ви отримуєте вибране значення та текст всередині selectedValueта selectedText.


1
Оновлено, оскільки це єдина відповідь, не використовуючи jQuery.
Джастін

Я з коханням від ванілі js. Велике спасибі за це.
Енріке Бермудес

27
var someName = "Test";

$("#<%= ddltest.ClientID %>").each(function () {
    $('option', this).each(function () {
        if ($(this).text().toLowerCase() == someName) {
            $(this).attr('selected', 'selected')
        };
    });
});

Це допоможе вам отримати правильний напрямок. Наведений вище код повністю перевірений, якщо вам потрібна додаткова допомога, повідомте мене.


19

Для тих, хто використовує списки SharePoint і не хочуть використовувати давно сформований ідентифікатор, це спрацює:

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

17
 $("#selectID option:selected").text();

Замість цього #selectIDви можете використовувати будь-який селектор jQuery, як, наприклад, .selectClassклас.

Як зазначено в документації тут .

: Вибраний селектор працює для елементів <option>. Це не працює для прапорців або радіовходів; використовувати :checkedдля них.

.text () Відповідно до документації тут .

Отримайте комбінований текстовий вміст кожного елемента в наборі відповідних елементів, включаючи їх нащадків.

Таким чином, ви можете взяти текст з будь-якого елемента HTML за допомогою .text() методу.

Більш глибоке пояснення див. У документації.



13

Для отримання вибраного значення використання

$('#dropDownId').val();

а для отримання тексту вибраного елемента використовуйте цей рядок:

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


11

Виберіть Текст та вибране значення у спадному меню / виберіть подію зміни у jQuery

$("#yourdropdownid").change(function() {
    console.log($("option:selected", this).text()); //text
    console.log($(this).val()); //value
})

10

Просто спробуйте наступний код.

var text= $('#yourslectbox').find(":selected").text();

він повертає текст вибраної опції.




8

наступне працювало для мене:

$.trim($('#dropdownId option:selected').html())

1
Примітка. Не використовуйте це для багаторазового вибору. Він лише захоплює перше вибране значення.
макс


7

У братах

<a class="uibutton confirm addClient" href="javascript:void(0);">ADD Client</a>
<input type="text" placeholder="Enter client name" style="margin: 5px;float: right" class="clientsearch large" />
<select class="mychzn-select clientList">
  <option value="">Select Client name....</option>
  <option value="1">abc</option>
</select>


 /*jQuery*/
 $(this).siblings('select').children(':selected').text()

7

$(function () {
  alert('.val() = ' + $('#selectnumber').val() + '  AND  html() = ' + $('#selectnumber option:selected').html() + '  AND .text() = ' + $('#selectnumber option:selected').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
    <title></title>

  </head>
  <body>
    <form id="form1" runat="server">
      <div>
        <select id="selectnumber">
          <option value="1">one</option>
          <option value="2">two</option>
          <option value="3">three</option>
          <option value="4">four</option>
        </select>

      </div>
    </form>
  </body>
</html>

Клацніть, щоб побачити екран OutPut


Привіт, як це зробити у рядку / комірці таблиці , як ти знаєш, який із спаду зі таблиці? Я намагаюся здійснити виклик Ajax для отримання та заповнення значень, я можу це зробити на сторінці, але не всередині рядка таблиці ... чи можете ви додати допомогу, будь ласка
трансформатор


4

Якщо ви хочете результат у списку, тоді використовуйте:

x=[];
$("#list_id").children(':selected').each(function(){x.push($(this).text());})

2
$("#dropdown").find(":selected").text();


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

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

$("#dropdown").children(":selected").text();

дійсно пояснити , чому це працювало б
jwenting

2

Цей код працював на мене.

$("#yourdropdownid").children("option").filter(":selected").text();
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.