Question

我正在尝试将所选选项应用于其他下拉菜单，但是对于应用于所有值的值存在问题。

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

Jquery的：

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

目前，如果我从顶部下拉列表中进行选择并单击全选，则仅将值应用于第一个下拉列表，并使用类“fldSize”。我尝试使用每个（）但没有运气。

我最初得到的值并适用于所有，但这导致了问题，因为第一个选项被覆盖了默认值（所以如果选择'M'并应用于下面的下拉的所有输出变成 - M，S，M，L，XL）。

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

Answer 1

要应用于所有.fldSize个选择字段，您应使用each：

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

DEMO： http://jsfiddle.net/g46P6/

Answer 2

为什么你不能使用价值观？将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);
});

Answer 3

试试这个：

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

Answer 4

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

你必须在.fldSize和选项之间加一个空格。

适用于所有“选择选项”问题

4 个答案: