0

選択したオプションを他のドロップダウンに適用しようとしていますが、すべてに適用される値に問題があります。

HTML:

<!-- Default drop -->
<select class="fldSizeSelect" id="" name="">
    <option value="option one">-</option>
    <option value="option two">S</option>
    <option value="option three">M</option>
    <option value="option four">L</option>
    <option value="option five">XL</option>
</select>
<select class="fldSize" id="" name="">
    <option value="">-</option>
    <option value="s">S</option>
    <option value="m" selected="selected">M</option>
    <option value="l">L</option>
    <option value="xl">XL</option>
</select>
<select class="fldSize" id="" name="">
    <option value="">-</option>
    <option value="s">S</option>
    <option value="m" selected="selected">M</option>
    <option value="l">L</option>
    <option value="xl">XL</option>
</select>
<input type="button" value="Apply to all" class="selectedToAll" id="" name="">

Jクエリ:

$('.selectedToAll').click(function () {
    var position =  $('.fldSizeSelect option:selected').index();        
    $('.fldSize option').eq(position).attr('selected', 'selected');
});

現在、一番上のドロップダウンから選択してすべて選択をクリックすると、クラス「fldSize」の最初のドロップダウンにのみ値が適用されます。each() を使用してみましたが、うまくいきませんでした。

最初に値を取得してすべてに適用しましたが、最初のオプションがデフォルト値で上書きされたため、問題が発生していました (したがって、「M」が選択され、以下のドロップダウンのすべての出力に適用された場合、M、S になりました、M、L、XL)。

現在の方法では正しいオプションが適用されますが、すべてではなく最初のドロップダウンにのみ適用されます。どんな助けでも大歓迎です。

4

4 に答える 4

0

なぜ値を使用できないのですか? HTML の最初の部分を次のように変更します。

<select class="fldSizeSelect" id="" name="">
    <option value="">-</option>
    <option value="s">S</option>
    <option value="m">M</option>
    <option value="l">L</option>
    <option value="xl">XL</option>
</select>

そして、これを行います：

$('.selectedToAll').click(function () {
    var value = $('.fldSizeSelect').val();
    $('.fldSize').val(value);
});
于 2012-07-09T08:31:29.720 に答える
0

.fldSizeすべての選択フィールドに適用するには、次を使用する必要がありますeach。

$('.selectedToAll').click(function() {
    var position = $('.fldSizeSelect option:selected').index();
    $('.fldSize').each(function() {
        $(this).children().eq(position).attr('selected', 'selected');
    });
});​

デモ: http://jsfiddle.net/g46P6/

于 2012-07-09T08:27:40.280 に答える
0

これを試して：

$('.selectedToAll').click(function () {
    var position =  $('.fldSizeSelect option:selected').index();        
    $('.fldSize:eq(0) option').eq(position).prop('selected', true);
    $('.fldSize:eq(1) option').eq(position).prop('selected', true);
});

http://jsfiddle.net/JkfcB/

于 2012-07-09T08:36:20.427 に答える
-1 
$('.selectedToAll').click(function () {
    var position =  $('.fldSizeSelectoption:selected').index();     
    $('.fldSize option').eq(position).attr('selected', 'selected');
});

.fldSize とオプションの間にスペースを入れる必要があります。

于 2012-07-09T08:27:09.380 に答える