web-dev-qa-db-ja.com

jQueryを使用して選択リストで選択した属性を設定する

次のHTMLがあります。

<select id="dropdown">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

文字列「B」があるので、selected属性を設定して、次のようにします。

<select id="dropdown">
    <option>A</option>
    <option selected="selected">B</option>
    <option>C</option>
</select>

JQueryでこれを行うにはどうすればよいですか？

jqueryhtmlhtml-select
54
Rupert

オプションのvalue属性を含めるためにHTMLを少し変更してもかまわない場合は、これを行うために必要なコードを大幅に削減できます。

<option>B</option>

に

<option value="B">B</option>

これは、次のようなことをしたいときに役立ちます。

<option value="IL">Illinois</option>

それにより、フォローjQueryが変更を行います。

$("select option[value='B']").attr("selected","selected");

value属性の使用を含めるためにnotを決定した場合、各オプションを順に切り替えて、その値を手動で確認する必要があります。

$("select option").each(function(){
  if ($(this).text() == "B")
    $(this).attr("selected","selected");
});
123
Sampson
<select id="cars">
<option value='volvo'>volvo</option>
<option value='bmw'>bmw</option>
<option value='fiat'>fiat</option>
</select>

var make = "fiat";

$("#cars option[value='" + make + "']").attr("selected","selected");
11
Darren Rose

JQueryを使用している場合、1.6以降では.prop（）メソッドを使用する必要があります。

$('select option:nth(1)').prop("selected","selected");
7
G.Busato

私はオプションを繰り返して、テキストを選択したいものと比較し、選択した属性をそのオプションに設定します。正しいものが見つかったら、反復を終了します（複数選択がない場合）。

 $('#dropdown').find('option').each( function() {
      var $this = $(this);
      if ($this.text() == 'B') {
         $this.attr('selected','selected');
         return false;
      }
 });
3
tvanfosson

Danielrmtの.selectedIndex戦略に従うことができますが、次のようなオプションタグ内のテキストに基づいてインデックスを決定します。

$('#dropdown')[0].selectedIndex = $('#dropdown option').toArray().map(jQuery.text).indexOf('B');

これは、値属性を使用せずに元のHTMLで機能します。

2
Derek Veit

これは解決策になる可能性があります

$(document).on('change', 'select', function () {
            var value = $(this).val();
            $(this).find('option[value="' + value + '"]').attr("selected", "selected");
        })
2
Regan

純粋なDOMを使用できます。 http://www.w3schools.com/htmldom/prop_select_selectedindex.asp を参照してください

document.getElementById('dropdown').selectedIndex = 1;

しかし、jQueryは以下を支援できます。

$('#dropdown').selectedIndex = 1;
1
danielrmt
$('#select_id option:eq(0)').prop('selected', 'selected');

それは良いです

1
Mikulasche

コード：

var select = function(dropdown, selectedValue) {
    var options = $(dropdown).find("option");
    var matches = $.grep(options,
        function(n) { return $(n).text() == selectedValue; });
    $(matches).attr("selected", "selected");
};

例：

select("#dropdown", "B");
1
Joe Chung

の線に沿って何か...

$('select option:nth(1)').attr("selected","selected");
0
David