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

Как я могу получить выделенный текст (не выбранное значение) из раскрывающегося списка в JQuery?

29.10.2009 12:02:09
Только мои два цента: выпадающий "ASP" не является особенным; это просто старый добрый HTML. :-)
ankush981 4.06.2015 06:20:01
Можно сослаться на эту статью: javascriptstutorial.com/blog/…
Dilip Kumar Yadav 18.10.2016 12:02:30
для ванильного способа javascript, см. stackoverflow.com/a/5947/32453
rogerdpack 18.01.2017 19:27:03
Просто $ (this) .prop ('selected', true); заменил .att на .prop он работал для всех браузеров
Shahid Hussain Abbasi 12.01.2019 11:13:19
30 ОТВЕТОВ
РЕШЕНИЕ
$("#yourdropdownid option:selected").text();
3754
29.10.2009 12:05:38
Я думаю, что это должно быть, $("#yourdropdownid").children("option").filter(":selected").text()поскольку is () возвращает логическое значение того, соответствует ли объект селектору или нет.
MHollis 18.05.2012 14:04:23
Я второй комментарий о том () возвращает Boolen; в качестве альтернативы используйте следующее небольшое изменение: $ ('# yourdropdownid'). children ("option: selected"). text ();
scubbo 12.06.2012 14:56:05
@ Тест DT3 is("selected").text()возвращаетTypeError: Object false has no method 'text'
ianace 19.10.2012 07:20:07
$('select').children(':selected')самый быстрый способ: jsperf.com/get-selected-option-text
Simon 24.04.2013 13:51:41
$ ("# IdSelect"). Children ("option: selected"). Text ()
JD - DC TECH 18.11.2014 23:19:32

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

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

Для раскрывающегося списка ASP.NET вы можете использовать следующий селектор:

$("[id*='MyDropDownId'] :selected")
264
29.10.2009 12:04:28
Версия ASP.NET здесь единственная Jquery, которая работает с asp.net для меня, поэтому я согласен с этим. Этот: ( '$ ("# yourdropdownid option: selected"). Text ();' не работал на странице asp.net с использованием главной страницы.
netfed 9.09.2013 16:40:05
это не работает, потому что главные страницы asp.net выбрасывают случайные символы перед селектором. Технически это ищет что-то вроде("#ct0001yourdropdownid)
CSharper 3.04.2014 17:06:53
Dilip Kumar Yadav 18.10.2016 12:03:19
@CSharper - я думаю, говоря, что ASP.NET выбрасывает случайные символы , вводит в заблуждение. Они вовсе не случайны, они структурны и следуют строгим правилам (основанным на таких вещах, как, например, надели ли вы IDсвой элемент управления, а если нет, то на основании индекса их местонахождения на текущем уровне дерева и т. Д.). )
freefaller 9.03.2017 14:03:11
Привет, как вы делаете это внутри строки / ячейки таблицы, как узнать, какой из выпадающих из таблицы, особенно в ASP MVC 5
transformer 12.03.2017 07:41:06
var someName = "Test";

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

Это поможет вам получить правильное направление. Выше код полностью протестирован, если вам нужна дополнительная помощь, дайте мне знать.

27
2.02.2011 12:28:44
$("option:selected", $("#TipoRecorde")).text()
64
17.01.2012 18:21:59

$("#DropDownID").val() даст выбранное значение индекса.

55
14.11.2011 09:34:54
Не совсем ответ на вопрос, но был полезен для меня. Вопрос хочет выделенный текст.
Peter 28.11.2011 14:50:51

Если у вас уже есть выпадающий список в переменной, это то, что мне подходит:

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

Другие ответы на этот вопрос помогли мне, но в конечном итоге выбранная опция $ jQuery на форуме $ (this + "option: selected"). Attr ("rel") не работает в IE .

Обновление: исправлена ​​ссылка выше

102
12.05.2016 07:22:38

Ответы, размещенные здесь, например,

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

не работает для меня, но это сработало:

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

Возможно, это более старая версия jQuery.

215
28.02.2015 08:52:31
Не ненавидь этот ответ. Использование ключевого слова "найти" помогло мне. Я пришел из совершенно другого контекста.
ROFLwTIME 6.08.2012 13:50:37
вам вообще не нужна эта опция, поскольку она подразумевается с selected ... просто используя $ ('# yourdropdownid: selected'). text (); будет хорошо работать
Dss 17.01.2013 18:52:59
jquery-1.10.2.min, этот работал для меня, а не для других.
kubilay 27.02.2014 07:18:49
Популярный ответ работает, но мне он нужен на уже полученной ссылке на избранных, так что это лучший ответ для меня
Graham 22.10.2018 09:53:54

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

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

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

$('select[name="thegivenname"] option:selected').val();
42
29.06.2016 12:02:14
$("select[id=yourDropdownid] option:selected").text()

Это отлично работает

15
23.04.2013 10:23:52

Это работает для меня:

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

Версия jQuery : 1.9.1

54
28.02.2015 08:56:48
Это сработало для меня, потому что на changeмероприятии я теперь могу использовать, $(this).find('option:selected').text()чтобы получить текст.
Timo002 8.12.2014 20:54:21
$(this).children(':selected').text()также будет работать. @ Timo002
Mr. Mak 14.04.2017 08:06:43

Для тех, кто использует списки SharePoint и не хочет использовать длинный сгенерированный идентификатор, это будет работать:

var e = $('select[title="IntenalFieldName"] option:selected').text();
19
21.03.2015 13:56:07
 $("#selectID option:selected").text();

Вместо этого #selectIDвы можете использовать любой селектор jQuery, например, .selectClassиспользуя класс.

Как указано в документации здесь .

Селектор: selected работает для элементов <option>. Это не работает для флажков или радиовходов; использовать :checkedдля них.

.text () Согласно документации здесь .

Получите объединенное текстовое содержимое каждого элемента в наборе соответствующих элементов, включая их потомков.

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

Обратитесь к документации для более глубокого объяснения.

17
28.02.2015 08:58:50
$("#dropdownID").change(function(){
  alert($('option:selected', $(this)).text());
});
31
1.02.2014 05:55:09
это то, что я ожидал $(this) после моего вызова Ajax
Shantaram Tupe 30.11.2016 06:40:33
Вы также можете сделать $ ("option: selected", this) .text (), не заключая это в объект JQuery.
Doug F 5.03.2019 14:26:55

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

('#yourdropdownid').find(':selected').text();
9
29.11.2014 09:35:43

Различные способы

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

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

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

4. $("#myselect").find(":selected").text();
33
3.08.2014 19:39:08

В случае родного брата

<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
29.06.2016 12:03:07
$('#id').find('option:selected').text();
12
11.04.2015 09:39:05

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

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

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

Тогда вы получите выбранное значение и текст внутри selectedValueи selectedText.

26
22.11.2019 14:30:17
Проголосовал, потому что это единственный ответ, не использующий jQuery.
Justin Lessard 22.11.2019 14:31:05
Я с любовью с ванильным JS. Большое спасибо за это.
Enrique Bermúdez 12.02.2020 12:52:00

Эта работа для меня:

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

Я использую JQuery 1.10.2

7
9.07.2015 02:00:43

Это работает для меня

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

Если элемент создан динамически

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

у меня сработало следующее:

$.trim($('#dropdownId option:selected').html())
8
17.09.2015 05:13:23
Примечание: не используйте это для множественного выбора. Он захватывает только первое выбранное значение.
max 28.03.2016 04:25:53

Выберите текст и выбранное значение в раскрывающемся списке / выберите событие изменения в jQuery

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

Для получения выбранного значения используйте

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

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

$("#dropDownId option:selected").text();
13
23.01.2016 09:07:31

$(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 Screen

7
29.09.2016 04:59:33
Привет, как вы делаете это внутри строки / ячейки таблицы , откуда вы знаете, какой из выпадающих из таблицы? Я пытаюсь сделать ajax-вызов для извлечения и заполнения значений, я могу сделать это снаружи на странице, но не внутри Строки таблицы ... Вы можете добавить некоторую помощь, пожалуйста
transformer 12.03.2017 07:45:53
var e = document.getElementById("dropDownId");
var div = e.options[e.selectedIndex].text;
9
4.01.2017 12:53:48
Я попытался войти в div var div = e.options[e.selectedIndex].text;, и он отображает только первый пункт опции. Как получить каждый элемент для отображения?
Chris22 9.08.2017 06:59:30
@ Chris22 см. Эту ссылку stackoverflow.com/questions/3923858/…
Kalaivani M 30.08.2017 17:00:16

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

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

Пытаться:

$var = jQuery("#dropdownid option:selected").val();
   alert ($var);

Или, чтобы получить текст опции, используйте text():

$var = jQuery("#dropdownid option:selected").text();
   alert ($var);

Больше информации:

7
9.03.2017 07:03:10

Для множественного выбора:

$("#yourdropdownid :selected").map(function(i, v) { return $.trim($(v).text()); }
1
15.03.2018 22:21:12
$("#dropdownid option:selected").text();

если вы используете asp.net и пишите

<Asp:dropdownlist id="ddl" runat="Server" />

тогда вы должны использовать

$('#<%=ddl.Clientid%> option:selected').text();
1
21.05.2018 11:01:50

Просто попробуйте следующий код.

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

возвращает текст выбранной опции.

10
13.11.2018 06:03:43