javascript - JQueryを介した選択でのオプションの選択

Question

次のオプションを選択しています。

<select>
     <option value="1">A</option>
     <option value="2">B</option>
     <option value="3">C</option>
</select>

値が何であるかはわかりませんが、私の JQuery コードでは、テキストが B であることがわかっているため (他には何もない)、オプション 2 を選択します。

どうすればそれができますか？

Answer 1

:contains()セレクターを使用できます：

$('option:contains("B")').prop('selected', true);

または:

$('option')
    .filter(function() {
        return this.text == 'B'; 
    })
    .prop('selected', true);

Answer 2

値が何であるかわからないが、内部のテキストが何であるかはわかっている場合は、:contains()セレクターを使用して適切なオプションを取得し、その値を取得してから選択を設定できます。

:contains()は部分文字列の一致を実行するため、:contains(foo)と の両方を選択することに<p>foo</p>注意してください<p>barfoobar</p>( ThiefMasterがコメントで指摘しているように)。

選択をより細かく制御するには、後で説明した.filter()オプションが必要です。

// relevant option
//     : not entirely sure if .val() will get an option's value
var _optionval = $('option:contains("B")').attr('value');

// set select value
$('select').val(_optionval);

編集

ジャックの回答に対するあなたのコメントに基づいて、以下を共有しています。

:contains()基本的に、要素のコンテンツに対してマッチングを実行するように設計されています。それを回避する必要はありません。

ただし、 のようなものを使用して.filter()、より複雑なコードを書くことができます。

$('option').filter(function () {

    // we want the option (or optionS) with text that starts with "foo"
    return $(this).text().indexOf('foo') === 0;

    // or maybe just something with an exact match
    //
    // return $(this).text() === 'foo';
});

Answer 3

$('option').each(function(){
    var t=this
    if(t.text=='B'){
       t.selected='selected';
    }
});​