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();

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

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

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

オプションの値を2にしたい場合は、

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

現在選択されているオプションを取得する場合は、

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

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

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

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

数日前、私はこのコードを使用したサイトのjQueryを1.6から1.9に更新するときに、この動作が停止したことに気づきました...おそらく、別のコードとの競合でした...とにかく、解決策は、からオプションを削除することでしたfind（）コール：

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

それが私の解決策でした... jQueryの更新後に問題が発生した場合にのみ使用してください。

Paoloによって投稿された元のHTMLに基づいて、私は次のことを思いつきました。

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

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

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

#list要素内で選択された複数の値。

1. ページに選択タグが1つしかない場合は、ID「リスト」内で選択を指定できます

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

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

   jQuery("select option:selected").text();

以下を試してください：

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

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

これは、以前に更新されていない古い質問です。これを行う正しい方法は、

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

これが役に立てば幸いです:-)

選択したラベルを取得したかった。これはjQuery 1.5.1で機能しました。

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

$(this).children(":selected").text()

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

idセレクターの後にスペースを残します。

関数を使用して、選択したオプションテキストを取得できます .text();

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

jQuery("select option:selected").text();

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

しかし、Peter Mortensenのソリューションはうまくいきました：

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

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

$('#list option:selected").each()select要素からも取得する必要があることを除いて、私は始めていたでしょう。

使用する：

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();
});

私はIDではなく内部フィールド名でvalを取得しようとしていて、googleからこの投稿に来ましたが、必要な解決策は見つかりませんでしたが、解決策が見つかりました：

したがって、これは、SharePointリストに長いIDを使用する代わりに、フィールドの内部名を持つ選択された値を探す誰かを助けるかもしれません：

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

動的にキャストされたオブジェクトを扱っていたため、この答えが必要でしたが、ここにある他のメソッドは機能しないようです。

element.options[element.selectedIndex].text

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

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

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

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

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

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

代替ソリューションとして、jQueryセレクターのコンテキスト部分を使用<option>しvalue="2"て、ドロップダウンリスト内の要素を検索することもできます。

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

選択されたものを右側に表示する複数選択用の動的バージョンが欲しかった$(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>

次のいずれかの方法で入手できます

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