jQueryセット選択インデックス
選択ボックスがあります。
<select id="selectBox">
<option value="0">Number 0</option>
<option value="1">Number 1</option>
<option value="2">Number 2</option>
<option value="3">Number 3</option>
<option value="4">Number 4</option>
<option value="5">Number 5</option>
<option value="6">Number 6</option>
<option value="7">Number 7</option>
</select>
選択したインデックスに基づいて、いずれかのオプションを "選択"に設定します。
たとえば、 "Number 3"を設定しようとしている場合は、次のようにしています。
$('#selectBox')[3].attr('selected', 'selected');
しかしこれはうまくいきません。 jQueryを使用してインデックスに基づいて選択されたオプションを設定する方法を教えてください。
ありがとうございます。
_ note _ ：答えはjQuery 1.6.1以降に依存します
$('#selectBox :nth-child(4)').prop('selected', true); // To select via index
$('#selectBox option:eq(3)').prop('selected', true); // To select via value
コメントをありがとう、.getはjQueryのものではなくDOM要素を返すので機能しません。 .eq関数は、必要に応じてセレクタの外側でも使用できます。
$('#selectBox option').eq(3).prop('selected', true);
特定の index を選択するのではなく、 value を使用したい場合は、もっと簡潔で読みやすくすることもできます。
$("#selectBox").val("3");
注： .val(3)はこの例でも同様に機能しますが、数値以外の値は文字列でなければならないため、一貫性のために文字列を選択しました。
（例：<option value="hello">Number3</option>では.val("hello")を使用する必要があります）
これも役に立つかもしれないので、ここで追加したいと思いました。
アイテムのインデックスではなくアイテムの値に基づいて値を選択したい場合は、次のようにします。
あなたの選択リスト：
<select id="selectBox">
<option value="A">Number 0</option>
<option value="B">Number 1</option>
<option value="C">Number 2</option>
<option value="D">Number 3</option>
<option value="E">Number 4</option>
<option value="F">Number 5</option>
<option value="G">Number 6</option>
<option value="H">Number 7</option>
</select>
Jquery：
$('#selectBox option[value=C]').attr('selected', 'selected');
$('#selectBox option[value=C]').prop('selected', true);
今すぐ選択された項目は、「番号2」でしょう。
代わりにこれを試してください：
$("#selectBox").val(3);
また、これが役立つかどうかも確認してください。
http://elegantcode.com/2009/07/01/jquery-playing-with-select-dropdownlistcombobox/ -
もっと簡単です：
$('#selectBox option')[3].selected = true;
# Set element with index
$("#select option:eq(2)").attr("selected", "selected");
# Set element by text
$("#select").val("option Text").attr("selected", "selected");
あなたがセット選択のためのトップの方法で選択したいときは、あなたが使うことができます$('#select option').removeAttr('selected');は前の選択を削除します。
# Set element by value
$("#select").val("2");
# Get selected text
$("#select").children("option:selected").text(); # use attr() for get attributes
$("#select option:selected").text(); # use attr() for get attributes
# Get selected value
$("#select option:selected").val();
$("#select").children("option:selected").val();
$("#select option:selected").prevAll().size();
$("option:selected",this).val();
# Get selected index
$("#select option:selected").index();
$("#select option").index($("#select option:selected"));
# Select First Option
$("#select option:first");
# Select Last Item
$("#select option:last").remove();
# Replace item with new one
$("#select option:eq(1)").replaceWith("<option value='2'>new option</option>");
# Remove an item
$("#select option:eq(0)").remove();
select要素のval()は選択されたオプションの値を返しますが、javascriptのselectedIndexのように要素の数は返しません。
value="7"でオプションを選択するためにあなたは単に使うことができます：
$('#selectBox').val(7); //this will select the option with value 7.
このオプションを選択解除するには、空の配列を使用します。
$('#selectBox').val([]); //this is the best way to deselect the options
そしてもちろんあなたは複数のオプションを選択することができます*：
$('#selectBox').val([1,4,7]); //will select options with values 1,4 and 7
*しかしながら、複数のオプションを選択するには、あなたの<select>要素はMULTIPLE属性を持たなければなりません、そうでなければそれは機能しません。
私はいつもprop（ 'selected'）に関する問題を抱えていました、以下はいつも私のために働きました：
//first remove the current value
$("#selectBox").children().removeAttr("selected");
$("#selectBox").children().eq(index).attr('selected', 'selected');
これを試して：
$('select#mySelect').prop('selectedIndex', optionIndex);
最終的に、.changeイベントを起動します。
$('select#mySelect').prop('selectedIndex', optionIndex).change();
これがあまりにも役立つことを願っています
$('#selectBox option[value="3"]').attr('selected', true);
1.4.4ではエラーが発生しました： $（ "＃selectBox option"）[3] .attrは関数ではありません
これは動作します：$('#name option:eq(idx)').attr('selected', true);
#nameはselect id、idxは選択したいオプションの値です。
NB：
$('#selectBox option')[3].attr('selected', 'selected')
が正しくない場合、配列への参照によってjqueryオブジェクトではなくdomオブジェクトが取得されるため、たとえばFFの場合はTypeErrorで失敗します。 "$（ '＃selectBox option'）[3] .attr（）関数ではありません"
純粋なjavascript selectedIndex 属性は正しい方法です。なぜなら、これは純粋なjavascriptであり、クロスブラウザで動作するからです。
$('#selectBox')[0].selectedIndex=4;
これはjsfiddleデモです _ 2つのドロップダウンで、一方を他方の設定に使用します。
<select onchange="$('#selectBox')[0].selectedIndex=this.selectedIndex">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
<select id="selectBox">
<option value="0">Number 0</option>
<option value="1">Number 1</option>
<option value="2">Number 2</option>
</select>
必要なものがoptionタグの "selected"属性である場合は、selectedIndexを変更する前にこれを呼び出すこともできます（ ここではフィドル ）。
$('#selectBox option').removeAttr('selected')
.eq(this.selectedIndex).attr('selected','selected');
MarcとJohn Kugelmanの答えをはっきりさせるには、次のようにします。
$('#selectBox option').eq(3).attr('selected', 'selected')
jQueryオブジェクトではなくDOMオブジェクトを取得するため、get()を指定された方法で使用しても機能しません。したがって、次の解決策は機能しません。
$('#selectBox option').get(3).attr('selected', 'selected')
eq()は、指定されたインデックスを持つ要素のjQueryセットにフィルタをかけます。 $($('#selectBox option').get(3))よりはっきりしています。それほど効率的というわけではありません。 $($('#selectBox option')[3])はより効率的です（ テストケース を参照）。
実際にはjQueryオブジェクトは必要ありません。これでうまくいくでしょう。
$('#selectBox option')[3].selected = true;
もう1つ非常に重要な点：
属性 "selected"は、選択されたラジオボタンを指定する方法ではありません（少なくともFirefoxとChromeでは）。 "checked"属性を使う：
$('#selectBox option')[3].checked = true;
チェックボックスについても同じことが言えます。
//funcion para seleccionar por el text del select
var text = '';
var canal = ($("#name_canal").val()).split(' ');
$('#id_empresa option').each(function(i, option) {
text = $('#id_empresa option:eq('+i+')').text();
if(text.toLowerCase() == canal[0].toLowerCase()){
$('#id_empresa option:eq('+i+')').attr('selected', true);
}
});
Jsファイルにハードコーディングされた値がないソリューションが必要です。 selectedIndexを使います。与えられた解決策のほとんどは1つのブラウザに失敗しました。これはFF10とIE8で動作するようです（他の誰かが他のバージョンでテストできます）
$("#selectBox").get(0).selectedIndex = 1;
私は同じ問題に直面しました。最初にあなたはイベントを通過する必要があります（すなわち、どのイベントが最初に起こっているか）。
例えば：
First eventはオプション付きのセレクトボックスを生成しています。
Second eventはval（）などの関数を使ってデフォルトのオプションを選択しています。
あなたはSecond eventがFirst eventの後に来るようにするべきです。
これを実現するには、2つの関数を取り、generateSelectbox（）（選択ボックスの生成用）とselectDefaultOption（）
selectDefaultOption（）はgenerateSelectbox（）の実行後にのみ呼び出されるようにする必要があります。
選択ボックスが複数の場合は、複数の値を初期化することもできます。
$('#selectBox').val(['A', 'B', 'C']);
次のようにして、選択リストの値に基づいて項目を選択します（特にオプション値にスペースまたは奇妙な文字が含まれている場合）。
$("#SelectList option").each(function () {
if ($(this).val() == "1:00 PM")
$(this).attr('selected', 'selected');
});
また、（複数選択ではなく）ドロップダウンがある場合は、break;を実行して、first-value-foundが上書きされないようにすることができます。
$('#selectBox option').get(3).attr('selected', 'selected')
上記を使用しているとき、私はウェブキット（Chrome）で次のようなエラーが出続けました。
"TypeErrorが見つかりませんでした：オブジェクト＃にはメソッド 'attr'がありません。"
この構文はこれらのエラーを防ぎます。
$($('#selectBox option').get(3)).attr('selected', 'selected');
アイテムの特定のプロパティに基づいてアイテムを選択したいだけであれば、タイプ[prop = val]のjQueryオプションはそのアイテムを取得します。今私は私がちょうどその値でアイテムを欲しかったインデックスについては気にしません。
$('#mySelect options[value=3]).attr('selected', 'selected');
私はよくそれを機能させるためにトリガー（ '変更'）を使います
$('#selectBox option:eq(position_index)').prop('selected', true).trigger('change');
Id select = selectA1およびposition_index = 0の場合の例（selectのfristオプション）：
$('#selectA1 option:eq(0)').prop('selected', true).trigger('change');
オプションを選択するだけでなく、selectoption変数の値を動的に設定できます。次のコードを試すことができます。
コード：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
$(function(){
$('#allcheck').click(function(){
// $('#select_option').val([1,2,5]);also can use multi selectbox
// $('#select_option').val(1);
var selectoption=3;
$("#selectBox>option[value="+selectoption+"]").attr('selected', 'selected');
});
});
HTMLコード：
<select id="selectBox">
<option value="0">Number 0</option>
<option value="1">Number 1</option>
<option value="2">Number 2</option>
<option value="3">Number 3</option>
<option value="4">Number 4</option>
<option value="5">Number 5</option>
<option value="6">Number 6</option>
<option value="7">Number 7</option>
</select> <br>
<strong>Select <a style="cursor:pointer;" id="allcheck">click for select option</a></strong>