私は選択ボックスを持っています：

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

選択したインデックスに基づいて、オプションの1つを「選択済み」に設定したいと思います。

たとえば、「3番」を設定しようとしている場合は、次のようにします。

$('#selectBox')[3].attr('selected', 'selected');

しかし、これは機能しません。jQueryを使用して、そのインデックスに基づいて選択されたオプションをどのように設定できますか？

ありがとう！

注：答えは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);

特定のインデックスの選択に依存するのではなく、値を使用する場合は、より簡潔で読みやすくすることもできます。

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

さらにシンプル：

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

理解する必要があるのval()は、select要素の場合、選択したオプションの値が返されますがselectedIndex、JavaScriptのように要素の数は返されないことです。

オプションを選択するには、次のコマンドを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);

3番目のオプションを選択

$('#selectBox').val($('#selectBox option').eq(2).val());

jsfiddleの例

注意：

$('#selectBox option')[3].attr('selected', 'selected') 

正しくない場合、配列の違いはjqueryオブジェクトではなくdomオブジェクトを取得するため、たとえばFFでは次のようにTypeErrorで失敗します： "$（ '＃selectBox option'）[3] .attr（）not function 」

マークとジョンクーゲルマンの答えを明確にするには、次のようにします。

$('#selectBox option').eq(3).attr('selected', 'selected')

get() jQueryオブジェクトではなくDOMオブジェクトを取得するため、指定された方法で使用すると機能しません。そのため、次のソリューションは機能しません。

$('#selectBox option').get(3).attr('selected', 'selected')

eq()getは、指定されたインデックスを持つ要素のjQueryセットにjQueryセットをフィルターします。それよりも明確です$($('#selectBox option').get(3))。それほど効率的ではありません。$($('#selectBox option')[3])より効率的です（テストケースを参照）。

ただし、実際にはjQueryオブジェクトは必要ありません。これはトリックを行います：

$('#selectBox option')[3].selected = true;

http://api.jquery.com/get/

http://api.jquery.com/eq/

もう1つの非常に重要なポイント：

「selected」属性は、選択されたラジオボタンを指定する方法ではありません（少なくともFirefoxおよびChromeでは）。「checked」属性を使用します。

$('#selectBox option')[3].checked = true;

同じことがチェックボックスにも言えます。

1.4.4ではエラーが発生します： $（ "＃selectBox option"）[3] .attrは関数ではありません

これは機能します： $('#name option:eq(idx)').attr('selected', true);

どこ#nameの選択IDであり、idx必要なオプション値が選択されています。

純粋なjavascriptのselectedIndex属性は適切な方法です。これは、純粋なjavascriptであり、クロスブラウザで機能するためです。

$('#selectBox')[0].selectedIndex=4;

これは、一方を使用して他方を設定する2つのドロップダウンがあるjsfiddleデモです。

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

オプションタグの "selected"属性が必要な場合は、selectedIndexを変更する前にこれを呼び出すこともできます（ここではフィドルです）。

$('#selectBox option').removeAttr('selected')
   .eq(this.selectedIndex).attr('selected','selected');

//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);
        }
    });

トリガー（「変更」）を使用して機能させることが多い

$('#selectBox option:eq(position_index)').prop('selected', true).trigger('change');

id select = selectA1およびposition_index = 0（selectの最初のオプション）の例：

$('#selectA1 option:eq(0)').prop('selected', true).trigger('change');

$('#selectBox option').get(3).attr('selected', 'selected')

上記を使用すると、webkit（Chrome）で次のエラーが発生し続けます。

「Uncaught TypeError：Object＃has no method 'attr'」

この構文はそれらのエラーを停止します。

$($('#selectBox  option').get(3)).attr('selected', 'selected');

これを行うだけで、選択リストの値に基づいて項目を選択します（特にオプションの値にスペースや変な文字が含まれている場合）。

$("#SelectList option").each(function () {
    if ($(this).val() == "1:00 PM")
        $(this).attr('selected', 'selected');
});

また、（複数選択ではなく）ドロップダウンがあるbreak;場合は、最初に見つかった値が上書きされないようにするために、ドロップダウンを行うことができます。

jsファイルにハードコードされた値がないソリューションが必要です。を使用してselectedIndex。指定されたソリューションのほとんどは、1つのブラウザーで失敗しました。これはFF10とIE8で動作するようです（他の誰かが他のバージョンでテストできます）

$("#selectBox").get(0).selectedIndex = 1; 

アイテムの特定のプロパティに基づいてアイテムを選択する場合は、type [prop = val]のjQueryオプションがそのアイテムを取得します。これで、アイテムの値によってアイテムが欲しかったインデックスについては気になりません。

$('#mySelect options[value=3]).attr('selected', 'selected');

私も同じ問題に直面しました。まず、イベントを通過する必要があります（つまり、最初に発生するイベント）。

例えば：

最初のイベントは、 オプションで選択ボックスを生成しています。

2つ目のイベントは、などのval（）などの任意の関数を使用して、デフォルトのオプションを選択しています

最初のイベントの後に2番目のイベントが発生するようにする必要があります。

これを実現するには、2つの関数でgenerateSelectbox（）（選択ボックスを生成するため）および selectDefaultOption（）

selectDefaultOption（）は、generateSelectbox（）の実行後にのみ呼び出されるようにする必要があります。

selectboxがmultiplの場合、複数の値を初期化することもできます。

$('#selectBox').val(['A', 'B', 'C']);

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&nbsp;&nbsp; <a style="cursor:pointer;" id="allcheck">click for select option</a></strong>

まもなく：

$("#selectBox").attr("selectedIndex",index)

ここで、indexは整数として選択されたインデックスです。