用jquery显示和隐藏<option>

问题描述

| 我有三个选择（html下拉列表），它们都包含完全相同的值（选择的id不同）。 现在我要这样做： 当用户在第一个选项中选择某个选项时，其他两个选项中将隐藏相同的选项。此规则也适用于其他两个选择。 如果第二个选择中的选项再次更改，则先前选择的选项必须重新出现在其他选择中。 我希望我很清楚。我知道这可能应该用javascript解决，但是我没有足够的知识来编写优雅的解决方案（我的解决方案可能会很长）。你能帮我这个吗？     

解决方法

        

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

是最简单的方法 http://api.jquery.com/hide/ 尝试切换它符合您的要求 http://api.jquery.com/toggle/ 您可以将选择框的these1 如果要隐藏单个选项 使用

.addClass

并将类添加到该选项以将其隐藏 http://api.jquery.com/addClass/     ,        聚会晚了一点，但是这里有一个完整的解决方案： 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/