Question

我有4个单独的选择下拉列表，但用户应该只能在4中选择一个选项。到目前为止，我已经尝试取消选择以前选择的选项，但我无法定位当前选择。

<select name="hood_select" class="form-control hood-selection">
    <option value="" disabled="disabled" selected="selected">Manhattan</option>
    <option value="upper manhattan">Upper Manhattan (North of W. 110th St.)</option>
    <option value="upper east side">Upper East Side (E. 60th St. to E. 128th St.)</option>
    <option value="upper west side">Upper West Side (W. 59th St. to W. 110th St.)</option>
</select>

<select name="hood_select" class="form-control hood-selection">
    <option value="" disabled="disabled" selected="selected">Brooklyn</option>
    <option value="greenpoint">Greenpoint</option>
    <option value="all other areas">All other areas</option>
</select>

<select name="hood_select" class="form-control hood-selection">
    <option value="" disabled="disabled" selected="selected">Queens</option>
    <option value="astoria">Astoria</option>
    <option value="woodside">Woodside</option>
    <option value="all other areas">All other areas</option>
</select>

<select name="hood_select" class="form-control hood-selection">
    <option value="" disabled="disabled" selected="selected">Other Areas</option>
    <option value="bronx">Bronx</option>
    <option value="new jersey">New Jersey</option>
    <option value="other">Other</option>
</select>

我也在下面列出了不完整的js。提前谢谢！

 $('select.hood-selection').change(function () {
    $('select.hood-selection').each(function() {
        $('select.hood-selection option').removeAttr("selected");
    });
});

Answer 1

首先替换：

 $('select.hood-selection option').removeAttr("selected");

使用：

$(this).find('option').removeAttr("selected");

在循环内部，以获得我们正在迭代的当前元素引用。

您可以使用not()排除更改的当前下拉列表：

$('select.hood-selection').change(function () {
var currentSelected = this; // save reference of current dropdown
    $('select.hood-selection').each(function() {
            $(this).not(currentSelected).find('option').removeAttr("selected");
        });
 });

或：

$('select.hood-selection').change(function () {
        $('select.hood-selection').not(this).each(function() {
                $(this).find('option').removeAttr("selected");
            });
     });

UPDATE：

正如OP所提到的，他想要选择其他下拉列表的第一个option，你可以使用eq()，你必须传递索引，因为传递 0 索引会选择option的第一个select：

$(document).ready(function () {
    $('select.hood-selection').change(function () {

        $('select.hood-selection').not(this).each(function () {
            $(this).find('option:eq(0)').prop("selected", true);
        });
    });
});

样本：

http://jsfiddle.net/aop5cpoc/3/

取消选择除当前选择之外的所有“选择”下拉选项

1 个答案:

UPDATE：

样本：