web-dev-qa-db-ja.com

JQueryを使用してドロップダウンリスト（選択ボックス）から選択したテキストを取得する

JQueryのドロップダウンリストから選択したテキスト（選択した値ではありません）を取得する方法を教えてください。

javascriptjquerydrop-down-menujquery-selectors
2145
haddar
$("#yourdropdownid option:selected").text();
3559
rahul

これを試して：

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

ASP.NETドロップダウンの場合は、次のセレクタを使用できます。

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

ここに投稿された答えは、例えば、

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

私のために働かなかった、しかしこれはした：

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

それはおそらくjQueryの古いバージョンです。

202
JYX

ドロップダウンリストがすでに変数に含まれている場合は、これが私にとって効果的です。

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

この質問に対する他の答えは私を助けてくれましたが、最終的にはjQueryフォーラムのスレッド$（this + "option：selected"）。attr（ "rel"）オプションの選択はIEで動作しませんが最も役に立った。

更新：上記のリンクを修正

96
Kirk Liemohn
$("option:selected", $("#TipoRecorde")).text()
61
Rafael

これは私のために働く

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

要素が動的に作成された場合

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

$("#DropDownID").val()は選択されたインデックス値を与えます。

54
Neeraj

これは私のために働く：

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

jQuery version：1.9.1

53
Binita Bharati

選択した項目のテキストには、次のように使用します。

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

選択した項目の値には、次のように使用します。

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

色々な方法

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

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

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

4. $("#myselect").find(":selected").text();
32
Salim
$("#dropdownID").change(function(){
  alert($('option:selected', $(this)).text());
});
29
N J
var someName = "Test";

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

それはあなたが正しい方向性を得るのを助けるでしょう。上記のコードは、さらに支援が必要な場合は完全にテストされています。

26
Zarni

これを使ってください

var listbox = document.getElementById("yourdropdownid");
var selIndex = listbox.selectedIndex;
var selValue = listbox.options[selIndex].value;
var selText = listbox.options[selIndex].text;

そして「selValue」と「selText」に警告してください。選択したドロップダウンの値とテキストが表示されます

19
Mohammed Shaheen MK

SharePoint listsを使用していて長い生成IDを使用したくない人のために、これはうまくいくでしょう：

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

#selectIDの代わりに、.selectClass using classのように、任意のjQueryセレクタを使用できます。

ドキュメントに記載されているように ここ 。

：選択されたセレクタは<option>要素に対しては機能します。チェックボックスやラジオ入力に対しては機能しません。それらには:checkedを使用してください。

.text（） ドキュメントのとおり ここ 。

一致した要素のセット内の各要素の結合テキストの内容を、それらの子孫も含めて取得します。

そのため、.text()メソッドを使用して任意のHTML要素からテキストを取り出すことができます。

より詳しい説明についてはドキュメントを参照してください。

16
Nikhil Agrawal
$("select[id=yourDropdownid] option:selected").text()

これはうまくいきます

14
Thangamani Palanisamy
$('#id').find('option:selected').text();
12
Nikul

選択された価値を得るために

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

そして選択されたアイテムのテキストを取得するためにこの行を使用します：

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

ドロップダウンでテキストと選択した値を選択/ jQueryでイベントの変更を選択

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

つかいます：

('#yourdropdownid').find(':selected').text();
9
kishore
var e = document.getElementById("dropDownId");
var div = e.options[e.selectedIndex].text;
7
Kalaivani M

兄弟の場合

<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
vineet

以下は私のために働いた：

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

試してください：

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

あるいはオプションのテキストを取得するには、text()を使います。

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

詳細情報：

6
Vishal Thakur

これは私のために働く：

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

私はjQuery 1.10.2を使っています

6
Rhaymand Tatlonghari

次のコードを試してください。

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

選択されたオプションのテキストを返します。

5
Muddasir23
$(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

5
Bhanu pratap

結果をリストとして表示したい場合は、次のようにします。

x=[];
$("#list_id").children(':selected').each(function(){x.Push($(this).text());})
3
max
$("#dropdownid option:selected").text();

asp.netを使って書いて

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

それならあなたは使うべきです

$('#<%=ddl.Clientid%> option:selected').text();
0
Manish Singh

以下の行を追加するだけです

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

.attを.propに置き換え、すべてのブラウザで機能しました。

0
Shahid Hussain Abbasi

複数選択の場合

$("#yourdropdownid :selected").map(function(i, v) { return $.trim($(v).text()); }
0
Curtis Yallop