jQueryは特定のオプションタグテキストを取得します

1249
Paolo Bergantino 2008-10-13 18:06.

大丈夫、私はこれを持っていると言います:

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

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

22 answers

1127
nickf 2008-10-13 18:08.

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

$("#list option[value='2']").text()
1262
Noname 2009-05-16 05:52.

値が2のオプションを取得する場合は、

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

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

$("#list option:selected").text();
132
raphie 2011-07-30 08:55.

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

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

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

数日前、このコードを使用したサイトのjQueryを1.6から1.9に更新すると、これが機能しなくなることに気付きました...おそらく別のコードとの競合でした...とにかく、解決策はオプションを削除することでしたfind()呼び出し:

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

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

109
asyadiqin 2011-05-03 02:25.

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

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

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

37
m3ct0n 2010-06-05 04:30.
$("#list option:selected").each(function() { alert($(this).text());
});  

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

37
Beena Shetty 2012-06-13 17:45.
  1. ページにselectタグが1つしかない場合は、id'list '内でselectを指定できます。

    jQuery("select option[value=2]").text();
    
  2. 選択したテキストを取得するには

    jQuery("select option:selected").text();
    
24
Andrew Moore 2008-10-13 18:08.

次のことを試してください。

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

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

19
mindmyweb 2014-07-03 13:15.

これは古い質問ですが、これを行う正しい方法は、しばらくの間更新されていません。

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

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

17
Dilantha 2011-03-01 19:44.

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

$("#list :selected").text();
17
Avinash Saini 2013-04-04 01:21.
$(this).children(":selected").text()
14
Dilipkumar63 2017-03-02 23:35.

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

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

jQuery("select option:selected").text();
13
Mon 2010-05-31 20:38.
$("#list [value='2']").text();

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

9
eon 2011-05-27 09:04.

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

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

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

通常の方法が.each()(おそらく私自身の間違いで)成功しない理由はわかりませんが、ピーター、ありがとうございます。それが最初の質問ではなかったことは知っていますが、「Googleを介してやってくる初心者のために」と言っています。

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

9
Mary Daisy Sanchez 2011-07-12 13:53.

使用する:

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();
});
5
FAA 2013-11-06 11:57.

IDではなく内部フィールド名でvalを取得することを探していて、グーグルからこの投稿にアクセスしましたが、必要な解決策が見つかりませんでしたが、解決策を取得しました。

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

var e = $('select[title="IntenalFieldName"] option:selected').text(); 
5
Alireza Fattahi 2015-03-09 19:43.

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

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

または(より良いスタイル)

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

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

4
Martin Clemens Bloch 2013-02-13 05:36.

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

element.options[element.selectedIndex].text

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

3
VisioN 2013-01-21 04:57.

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

$("option[value='2']", "#list").text();
2
gordon 2012-01-04 11:04.

右側に選択されているものを表示する複数選択の動的バージョンが必要でした(読み進めて見たかったの$(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
Anfath Hifans 2018-05-08 23:57.

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

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

0
Kamil Kiełczewski 2020-08-21 04:23.

試してみてください

[...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>

0
Zakaria Binsaifullah 2020-10-22 04:22.

これを試して:

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

Related questions

MORE COOL STUFF

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

グッドジョブ、ESPN

グッドジョブ、ESPN

今日のホワイトハウスの記者会見で、報道官のサラ・ハッカビー・サンダースは、スポーツセンターのホストであるイェメル・ヒルのドナルド・トランプに関する最近のツイートについてコメントするよう求められ、大統領と彼の政策を白人至上主義者として説明した。ヒルは彼女のつぶやきのためにESPNによって公に叱責されました。

アマゾンからのこのレミントンツールセールで髪を整える、スタイルを整える、乾かす、または取り除く

アマゾンからのこのレミントンツールセールで髪を整える、スタイルを整える、乾かす、または取り除く

基本的に頭のあらゆる部分から髪の毛を整えたり、ブロードライしたり、まっすぐにしたり、脱毛したりする必要がある場合は、このレミントンゴールドボックスが最適です。今日だけ、Amazonは、すでに人気のあるShortcut Pro Self-HaircutKitやPearlPro Ceramic Flat Ironのように、グルーミングをはるかに簡単にするヘアツールをマークダウンしています。

カナダの元桂冠詩人が、史上最高の文化の盗用でトゥパックとマヤアンジェロウから盗んだ

カナダの元桂冠詩人が、史上最高の文化の盗用でトゥパックとマヤアンジェロウから盗んだ

トゥパックシャクール(ティムモーゼンフェルダー/ゲッティイメージズ); マヤアンジェロウ(マーティンゴッドウィン/ゲッティイメージズ)移動、テイラースウィフト。ケンドールとカイリーは、必要な数の座席を持っています。

テスラは、ハリケーンイルマによる避難を容易にするために、フロリダでの車両の範囲を拡大しています

テスラは、ハリケーンイルマによる避難を容易にするために、フロリダでの車両の範囲を拡大しています

写真:Tesla Motorsフロリダに住んでいて、Tesla Model S、Model X 60、またはModel 60Dを使用している場合、車の自律性は50 km(約30マイル)高くなります。これは失敗ではなく、ハリケーンイルマによる避難作業を容易にするために会社自身が命じた自治権の一時的な延長です。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

投資ノート:Bioscout AU$300万シード

投資ノート:Bioscout AU$300万シード

Bioscoutは、農家を運転席に置くという使命を負っています。Artesian(GrainInnovate)やUniseedと並んで、最新のシードラウンドでチームを支援できることをうれしく思います。問題真菌症による重大な作物の損失は、農民にとって試練であることが証明されています。

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

遠隔医療は、パンデミック後の時代では新しいものではなく、時代遅れの分野でもありません。しかし、業界を詳しく見ると、需要と供給の強力な持続可能性と、米国で絶え間ない革命となる強力な潜在的成長曲線を示しています。

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

2021年は、世界的なベンチャーキャピタル(VC)の資金調達にとって記録的な年でした。DealStreetAsiaによると、東南アジアも例外ではなく、この地域では年間で記録的な25の新しいユニコーンが採掘されました。

ムーアの法則を超えて

ムーアの法則を超えて

計算に対する私たちの欲求とムーアの法則が提供できるものとの間には、指数関数的に増大するギャップがあります。私たちの文明は計算に基づいています—建築と想像力の現在の限界を超える技術を見つけなければなりません。

Language