Question

我有三个选择（html下拉列表），都包含完全相同的值（除了选择的ID不同）。

现在我想这样做：

当用户在第一个选择中选择某个选项时，其他两个选项中隐藏了相同的选项。此规则也适用于其他两个选择。
如果再次更改第二个选项中的选项，则之前选择的选项必须重新出现在其他选项中。

我希望我很清楚。我知道这应该可以通过javascript解决，但我没有足够的知识来编写一个优雅的解决方案（我可能会很长）。你能帮我解决这个问题吗？

Answer 1

$('#selectboxid').hide();

是最简单的方式

http://api.jquery.com/hide/

尝试切换它符合您的要求

http://api.jquery.com/toggle/

您可以拨打选择框的这些onchange

如果您想隐藏个别选项

使用.addClass并将该类添加到该选项以隐藏它

http://api.jquery.com/addClass/

Answer 2

晚会很晚，但这是一个完整的解决方案： HTML：

<select>
    <option value="Fred">Fred</option>
        <option value="Jim">Jim</option>
        <option value="Sally">Sally</option>
</select>
<select>
    <option value="Fred">Fred</option>
        <option value="Jim">Jim</option>
        <option value="Sally">Sally</option>
</select>
<select>
    <option value="Fred">Fred</option>
        <option value="Jim">Jim</option>
        <option value="Sally">Sally</option>
</select>

JavaScript的：

$(document).ready(function() {
    $("select").change(function() {
       var $this = $(this);
       var selected = this.options[this.selectedIndex].value;
       var index = $this.index();
        $("select").each(function() {
             var $this2 = $(this);
            if($this2.index() != index) {
            $(this.options).show();
            var $op = $this2.children("option:[value='" + selected + "']");
            $op.hide();
            if($this2.val() == selected) {
                 if($op.index() + 1 == $ops.length) {
                    $this2.val($ops.eq(0).val());
                }
                else {
                    $this2.val($ops.eq($op.index() + 1).val());
                }
            }
        }
        });
   });
});

此处还演示了：http://jsfiddle.net/thomas4g/u2sbd/21/

使用jquery </option>显示和隐藏<option>

2 个答案: