266

選択ボックスがあります：

<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 つを「選択済み」として設定したいと思います。

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

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

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

ありがとう！

4

25 に答える 25

462

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

于 2009-08-14T22:32:57.563 に答える
118

これも役に立つかもしれないので、ここに追加しようと思いました。

アイテムのインデックスではなく、アイテムの値に基づいて値を選択する場合は、次のようにします。

あなたの選択リスト:

<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」になります。

于 2010-08-11T14:34:23.973 に答える
68

代わりにこれを試してください：

$("#selectBox").val(3);
于 2009-08-14T22:31:11.217 に答える
51

さらに簡単：

$('#selectBox option')[3].selected = true;
于 2011-02-22T07:50:10.270 に答える
17 
# 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();
于 2013-04-09T12:58:23.490 に答える
11

私は常に prop('selected') で問題を抱えていましたが、次の方法で常にうまくいきました。

//first remove the current value
$("#selectBox").children().removeAttr("selected");
$("#selectBox").children().eq(index).attr('selected', 'selected');
于 2016-05-26T15:59:46.760 に答える
11

理解することが重要なのはval()、要素が選択されたオプションの値を返すことですが、javascriptselectのように要素の数を返すことではありません。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です。属性がないと機能しません。

于 2012-08-31T15:50:09.510 に答える
5

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

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

jsfiddle の例

于 2013-09-03T13:21:04.560 に答える
4

注意:

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

が正しくない場合、配列の参照は jquery オブジェクトではなく dom オブジェクトを取得するため、TypeError で失敗します。たとえば、FF では次のようになります。 ."

于 2010-12-08T17:40:07.180 に答える
4

純粋な 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>

オプションタグの「選択済み」属性が必要な場合は、selectedIndex を変更する前にこれを呼び出すこともできます (ここではフィドルです)。

$('#selectBox option').removeAttr('selected')
   .eq(this.selectedIndex).attr('selected','selected');
于 2013-06-27T02:01:43.997 に答える
4

1.4.4 では、エラーが発生します: $("#selectBox option")[3].attr is not a function

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

#nameselect id はどこにあり、 は選択しidxたいオプション値です。

于 2010-12-20T12:45:56.237 に答える
4

Marc と John Kugelman の回答を明確にするために、以下を使用できます。

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

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

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

eq()gets は、指定されたインデックスを持つ要素の 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つの非常に重要なポイント：

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

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

チェックボックスも同様です。

于 2011-06-08T14:44:21.667 に答える
2 
//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);
        }
    });
于 2011-10-21T03:49:35.673 に答える
1

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

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

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

于 2012-05-22T00:14:50.810 に答える
1

選択ボックスが複数の場合、複数の値を初期化することもできます:

$('#selectBox').val(['A', 'B', 'C']);
于 2013-01-08T14:24:44.367 に答える
1

私は同じ問題に直面しました。最初に、イベントを確認する必要があります (つまり、どのイベントが最初に発生しているか)。

例えば：

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

2 番目のイベントは、val() などの関数を使用してデフォルト オプションを選択することです。

Second イベントがFirst イベントの後に発生することを確認する必要があります。

これを実現するには、generateSelectbox() (選択ボックスの生成用) とselectDefaultOption()の 2 つの関数を使用します。

generateSelectbox ( )の実行後にのみselectDefaultOption()を呼び出すようにする必要があります。

于 2012-12-04T05:21:06.583 に答える
1

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

$("#selectBox").get(0).selectedIndex = 1;
于 2012-04-02T16:33:05.050 に答える
1 
$('#selectBox option').get(3).attr('selected', 'selected')

上記を使用すると、webkit (Chrome) で次のようなエラーが発生し続けました。

「キャッチされていない TypeError: オブジェクト # にはメソッド 'attr' がありません」

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

$($('#selectBox  option').get(3)).attr('selected', 'selected');
于 2011-03-09T11:02:08.277 に答える
1

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

$('#mySelect options[value=3]).attr('selected', 'selected');
于 2011-12-14T22:53:30.243 に答える
0

オプションが選択されるだけでなく、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>

于 2013-02-27T11:44:01.760 に答える
-2

まもなく:

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

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

于 2012-03-31T21:09:35.240 に答える