web-dev-qa-db-ja.com

jQueryが特定のオプションタグテキストを取得する

大丈夫、私はこれを持っていると言う：

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

値が「2」のときに「オプションB」を取得したい場合、セレクタはどのようになりますか？

これは選択されたテキスト値を取得する方法を尋ねるのではなく、選択されているかどうかにかかわらず、value属性に応じてそれらのうちのどれか1つだけです。 。私は試した：

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

しかし、それは機能していません。

javascriptjquerydrop-down-menujquery-selectors
1190
Paolo Bergantino

それは2に等しいプロパティlistを持つid valueを持つ要素を探しています。あなたが欲しいのはoptionのlist子です。

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

2の値を持つオプションを取得したい場合は、を使用してください。

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

現在選択されているオプションを選択したい場合は、を使用してください。

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

これは私にとって完璧に機能しました。MySQLによって生成されたオプションを使用して2つの異なる値を送信する方法を探していました。以下は一般的で動的です。

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

コメントの1つで述べたように。これにより、オプション値とテキストの両方の値を取得したいすべての選択ボックスで機能する動的関数を作成できました。

数日前、私がこのコードを使用していたサイトのjQueryを1.6から1.9に更新すると、これが機能しなくなったことに気付きました。 find（）を呼び出します。

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

それが私の解決策でした…あなたのjQueryを更新した後に問題がある場合にのみ使用してください。

124
raphie

Paoloが投稿したオリジナルのHTMLに基づいて、私は以下のことを思いつきました。

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

Internet ExplorerとFirefoxで動作することがテストされています。

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

#listエレメントで複数選択された値の場合。

36
m3ct0n

  1. ページ内にselectタグが1つしかない場合は、id 'list'の内側にselectを指定できます。

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

  2. 選択したテキストを取得する

    jQuery("select option:selected").text();
36
Beena Shetty

以下を試してください。

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

元のスニペットが機能しなかった理由は、OPTIONタグがSELECTタグの子であるためです。これはidlistです。

23
Andrew Moore

これは昔の質問ですが、しばらくしても更新されていません。正しい方法は、

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

これが役に立つことを願っています:-)

19
mindmyweb
$(this).children(":selected").text()
17
Avinash Saini

選択したラベルを取得したいのですが。これは私にとってjQuery 1.5.1でうまくいきました。

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

あなたは関数.text();を使うことによって選択されたオプションテキストを得ることができます

あなたはこのように関数を呼び出すことができます：

jQuery("select option:selected").text();
13
Dilipkumar63
$("#list [value='2']").text();

iDセレクタの後にスペースを入れます。

13
Mon

.each（function（）...）を使用して動的に作成された選択要素を「ループ」している間、$("option:selected").text();と$(this + " option:selected").text()は選択されたオプションテキストを返しませんでした - 代わりにnullでした。

しかしPeter Mortensenの解決策はうまくいった。

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

いつものやり方で.each()が成功しない理由はわかりませんが（おそらく私自身の過ちです）、Peterに感謝します。それが最初の質問ではなかったことを私は知っていますが、それは「Googleを介してやってくる初心者のために」それに言及しています。

Select要素からものを取得する必要があることを除けば、私は$('#list option:selected").each()から始めました。

10
eon

つかいます：

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();
});
8
Mary Daisy Sanchez

私はIDではなく内部フィールド名でvalを取得することを探していましたが、この投稿にGoogleから来ました。

そのため、SharePointリストに長いIDを使用するのではなく、フィールドの内部名を使用して選択した値を探すのに役立ちます。

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

動的キャストオブジェクトを扱っていたのでこの答えが必要でしたが、他のメソッドはうまくいかなかったようです。

element.options[element.selectedIndex].text

これはもちろん、HTMLをnodeValueやchildNodesなどで解析する代わりに、 DOM オブジェクトを使用します。

4
Martin Clemens Bloch

ヒント：値が動的な場合は、以下のコードを使用できます。

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

または（より良いスタイル）

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

で説明したように、jQueryは特定のオプションタグテキストを取得し、その値に動的変数を配置します

4
Alireza Fattahi

別の解決策として、jQueryセレクタの コンテキスト部分 を使用して、ドロップダウンリスト内で<option>を持つvalue="2"要素を見つけることもできます。

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

私は、選択されたものが右側に表示されるような動的なバージョンのselect multipleを望んでいました（先に読んで$(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>
2
gordon

次のいずれかの方法があります。

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

選択した値を取得したい場合は：

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