1

HTML select 要素のグループの選択されたオプションを変更しようとしています。jQueryを使用して一度にすべてを選択できるように、すべて同じクラスを指定しましたが、何らかの理由でクラスの最初の要素のみが変更されます。ここにデモがあります：http://jsfiddle.net/bwhitney/xP4FP/1/

コードは次のとおりです。

<select id="config1" class="config">
<option>foo</option>
<option selected>bar</option>
</select>

<select id="config2" class="config">
<option>foo</option>
<option selected>bar</option>
</select>

<select id="config3" class="config">
<option>foo</option>
<option selected>bar</option>
</select>

jQuery の場合:

$('.config option:eq(0)').attr('selected', 'selected');​

このコードの結果、最初の select 要素だけでfooオプションが選択されます。2 番目と 3 番目はまだbar選択されています。jQueryを使用してクラスを選択すると、そのクラスを持つすべてのアイテムが選択されると思いました。1 つのセレクターでこれら 3 つすべてを選択する方法はありますか?

可能性のある答えに対する先制的な応答として（誰かがこれを提案すると思うと確信しています）： for ループを記述して、それぞれを選択できることを知っています$('#config' + i)。一度にすべてを選択する方法がない場合、これが私がやることになります。

4

6 に答える 6

3

それ以外の

$('.config option:eq(0)').attr('selected', 'selected');​

使用する必要があります

$('.config option:nth-child(1)').attr('selected', 'selected');​​​​​​​​​​​​​​​​​​

との根本的な違いは:eq()、:nth-child()

:eq()

Select the element at index n within the matched set.

:eq()要素は、前にある式、つまり.config optionあなたの場合に基づいて最初に一致します。

を実行するconsole.log($('.config option'));と、次のようになります

[ <option>​foo​&lt;/option>​, <option selected>​bar​&lt;/option>​, <option>​foo​&lt;/option>​, <option selected>​bar​&lt;/option>​, <option>​foo​&lt;/option>​, <option selected>​bar​&lt;/option> ​]

そして:eq(0)、この一致したセットをフィルタリングするため、最初の要素、つまり<option>foo</option>.

:n番目の子()

Selects all elements that are the nth-child of their parent.

フィルタリング中に:nth-child()親要素が考慮されます。

違いは、次のコマンドによって最もよく示されます

console.log($('.config option:eq(0)'));

と

console.log($('.config option:nth-child(1)'));

最初のコマンドは、予想どおり、[<option>​foo​&lt;/option>​]一致した要素セットの最初の要素であるため、返されます。

2 番目のコマンドは、戻ります

[ <option>​foo​&lt;/option>​, <option>​foo​&lt;/option>​, <option>​foo​&lt;/option>​ ]

.configtypeのすべての最初の子を選択するためoptionです。

もちろん、他のすべての答えは絶対に正しいです。

少し説明を加えようと思いました。:)

于 2012-07-11T17:58:54.333 に答える
3

使ってみてくださいnth-child:

$('select option:nth-child(1)').prop('selected', 'selected');

例: http://jsfiddle.net/K4mnx/

于 2012-07-11T17:31:04.010 に答える
1

eq(0) を次のように変更します。

$('.config option:first-child').attr('selected', 'selected');​
于 2012-07-11T17:30:17.910 に答える
1

これを使用してみてください.each()：

$('.config').each(function(index){
    $(this).children('option:eq(0)').attr('selected', 'selected')
});

<a href="http://jsfiddle.net/xP4FP/3/" rel="nofollow">JSFiddle

于 2012-07-11T17:28:30.040 に答える
0

私の知る限り、ループでのみ実行できます。それ以外の場合は、最初のループを更新するだけです。http://jsfiddle.net/xP4FP/2/

$('.config option:eq(0)').each(function(i,el){$(el).attr('selected', 'selected')};
于 2012-07-11T17:29:21.750 に答える
0

多分これ：

$('.config').each(function(){ this.options[0].selected = 'selected'; });
于 2012-07-11T17:28:05.160 に答える