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」を取得したい場合、セレクターはどのようになりますか？

これは、選択されたテキスト値を取得する方法を要求するのではなく、値属性に応じて、選択されているかどうかに関係なく、それらのいずれか1つだけを要求することに注意してください。私は試した：

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

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

に等しいlistプロパティを持つidを持つ要素を探しています。あなたが欲しいのは：の子ですvalue2
optionlist

$("#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!');
});

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

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

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

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

   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!');
});

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

選択したラベルを取得したかったのです。これはjQuery1.5.1でうまくいきました。

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

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

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

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

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

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

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

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

しかし、PeterMortensenのソリューションは機能しました。

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

通常の方法が.each()（おそらく私自身の間違いで）成功しない理由はわかりませんが、ピーター、ありがとうございます。それが最初の質問ではなかったことは知っていますが、「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を取得することを探していて、グーグルからこの投稿にアクセスしましたが、必要な解決策が見つかりませんでしたが、解決策を取得しました。

したがって、これは、SharePointリストに長いIDを使用する代わりに、フィールド内部名で選択された値を探すのに役立つ可能性があります。

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

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

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

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

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

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

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

element.options[element.selectedIndex].text

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

別の解決策として、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>

試してみてください

[...list.options].find(o=> o.value=='2').text

let text = [...list.options].find(o=> o.value=='2').text;

console.log(text);

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

これを試して：

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