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

查询：

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

目前，如果我从顶部下拉列表中进行选择并单击全选，它只会将该值应用于具有“fldSize”类的第一个下拉列表。我尝试使用 each() 但没有运气。

我最初得到了该值并应用于所有，但这会导致问题，因为第一个选项也被默认值覆盖（因此，如果选择了“M”并将其应用于以下下拉列表的所有输出，则变为 - M，S , 中号, L, XL)。

使用当前方法，将应用正确的选项，但仅适用于第一个下拉菜单，而不是全部。任何帮助表示赞赏。

4

4 回答 4

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

为什么不能使用值？将 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

尝试这个：

$('.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 回答