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

avatar
haddar
29 октября 2009 в 12:02
2160724
35
2398

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

Источник
ankush981
4 июня 2015 в 06:20
13

Только мои два цента: раскрывающийся список «ASP» не является чем-то особенным; это просто старый добрый HTML. :-)

Dilip Kumar Yadav
18 октября 2016 в 12:02
0

Можно сослаться на эту статью: javascriptstutorial.com/blog/…

rogerdpack
18 января 2017 в 19:27
0

для ванильного javascript-способа см. coderhelper.com/a/5947/32453

Shahid Hussain Abbasi
12 января 2019 в 11:13
0

Просто $ (this) .prop ('selected', true); заменил .att на .prop, он работал во всех браузерах

Ali NajafZadeh
3 августа 2021 в 16:57
0

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

Ответы (35)

avatar
rahul
29 октября 2009 в 12:05
3894
$("#yourdropdownid option:selected").text();
MHollis
18 мая 2012 в 14:04
213

Я думаю, это должно быть $("#yourdropdownid").children("option").filter(":selected").text(), поскольку is () возвращает логическое значение, соответствует ли объект селектору или нет.

scubbo
12 июня 2012 в 14:56
45

Второй комментарий о том, что is () возвращает логическое значение; в качестве альтернативы используйте следующее небольшое изменение: $ ('# yourdropdownid'). children ("option: selected"). text ();

Simon
24 апреля 2013 в 13:51
101

$('select').children(':selected') - самый быстрый способ: jsperf.com/get-selected-option-text

avatar
Diaa M. Shalabi
20 октября 2021 в 14:48
0
$("#dropdownid").change(function(el) {
    console.log(el.value);
});

Или вы можете использовать это

$("#dropdownid").change(function() {
    console.log($(this).val());
});
avatar
Naveenbos
13 февраля 2020 в 16:17
5

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

$("#yourdropdownid").children("option").filter(":selected").text();
avatar
Kamil Kiełczewski
17 января 2020 в 17:10
3

Попробуйте

dropdown.selectedOptions[0].text

function read() {
  console.log( dropdown.selectedOptions[0].text );
}
<select id="dropdown">
  <option value="1">First</option>
  <option value="2">Second</option>
</select>
<button onclick="read()">read</button>
Daniel Tonon
22 апреля 2020 в 00:24
1

Спасибо за подход, основанный на чистом JS.

avatar
shyamm
17 декабря 2019 в 06:50
3
$("#dropdown").find(":selected").text();


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

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

$("#dropdown").children(":selected").text();
avatar
Shahid Hussain Abbasi
12 января 2019 в 11:12
0

Просто добавьте строку ниже

$(this).prop('selected', true);

заменил .att на .prop, он работал во всех браузерах.

avatar
Muddasir23
13 ноября 2018 в 06:03
10

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

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

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

avatar
Manish Singh
21 мая 2018 в 11:01
1
$("#dropdownid option:selected").text();

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

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

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

$('#<%=ddl.Clientid%> option:selected').text();
avatar
Curtis Yallop
15 марта 2018 в 22:21
2

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

$("#yourdropdownid :selected").map(function(i, v) { return $.trim($(v).text()); }
avatar
Vishal Thakur
9 марта 2017 в 07:03
11

Попробуйте:

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

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

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

Дополнительная информация:

avatar
max
18 января 2017 в 21:56
4

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

x=[];
$("#list_id").children(':selected').each(function(){x.push($(this).text());})
avatar
Kalaivani M
4 января 2017 в 12:53
10
var e = document.getElementById("dropDownId");
var div = e.options[e.selectedIndex].text;
avatar
Bhanu Pratap
9 августа 2016 в 17:01
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>

Click to see OutPut Screen

avatar
Mojtaba
23 января 2016 в 09:07
13

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

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

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

$("#dropDownId option:selected").text();
avatar
Sandeep Shekhawat
19 ноября 2015 в 05:36
11

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

$("#yourdropdownid").change(function() {
    console.log($("option:selected", this).text()); //text
    console.log($(this).val()); //value
})
avatar
Mohammad Dayyan
17 сентября 2015 в 05:13
8

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

$.trim($('#dropdownId option:selected').html())
avatar
Prabhagaran
14 августа 2015 в 11:12
72

У меня работает

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

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

$(document).on("change", "#dropdownid", function() {
    alert($(this).find("option:selected").text());
});
avatar
Rhaymand Tatlonghari
9 июля 2015 в 02:00
7

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

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

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

avatar
Mohammed Shaheen MK
14 мая 2015 в 14:21
34

Используйте это

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

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

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

avatar
Nikul
11 апреля 2015 в 09:39
12
$('#id').find('option:selected').text();
avatar
vineet
5 декабря 2014 в 06:33
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()
avatar
MaxEcho
3 августа 2014 в 19:39
35

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

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

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

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

4. $("#myselect").find(":selected").text();
avatar
kishore
31 июля 2014 в 15:11
9

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

('#yourdropdownid').find(':selected').text();
avatar
124
1 февраля 2014 в 05:55
31
$("#dropdownID").change(function(){
  alert($('option:selected', $(this)).text());
});
avatar
Nikhil Agrawal
30 января 2014 в 14:29
17
 $("#selectID option:selected").text();

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

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

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

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

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

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

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

avatar
FAA
5 ноября 2013 в 21:38
19

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

var e = $('select[title="IntenalFieldName"] option:selected').text();
avatar
Binita Bharati
25 сентября 2013 в 07:36
54

У меня работает:

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

jQuery версия: 1.9.1

avatar
Thangamani Palanisamy
23 апреля 2013 в 10:04
15
$("select[id=yourDropdownid] option:selected").text()

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

avatar
Kamrul
24 января 2013 в 23:22
43

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

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

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

$('select[name="thegivenname"] option:selected').val();
avatar
JYX
19 марта 2012 в 11:41
225

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

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

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

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

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

avatar
Kirk Liemohn
4 февраля 2012 в 05:17
111

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

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

Другие ответы на этот вопрос мне помогли, но в конечном итоге ветка форума jQuery $ (этот + "option: selected"). Выбранный параметр attr ("rel") не работает в IE помогло больше всего.

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

avatar
Neeraj
14 ноября 2011 в 09:22
55

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

Peter
28 ноября 2011 в 14:50
38

Не совсем ответ на вопрос, но мне пригодился. Вопросу нужен выделенный текст.

avatar
Rafael
16 августа 2011 в 17:56
66
$("option:selected", $("#TipoRecorde")).text()
avatar
Zarni
7 октября 2010 в 10:09
29
var someName = "Test";

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

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

avatar
kgiannakakis
29 октября 2009 в 12:04
275

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

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

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

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