Javascript 触发选择折叠的不可选择的选择选项

我想用一个额外的«查看更多…»行来增强现有的

标记，选中该行后，将显示一些GUI控件。当用户单击“查看更多…”时，我需要：

当前选定的

将被保留

无法选择其他行

下拉菜单关闭

我的第一次尝试失败了#1和#2：

jQuery（函数（$）{
$（“选择”）。每个（函数（）{
var$more=$（“查看更多…”）
.on（“单击”，函数（）{
警惕（“在这里放上你喜欢的AJAX对话”）；
})
。附于（$（本））；
});
});

选择«；查看更多…”；有关更多选项：

加拿大
美国
法国
联合王国
这很有效

<style type="text/css">
    .disabled {
        color: #808080;
    }
</style>


<script type="text/javascript">
    jQuery(function($) {
        $("select").each(function() {
            var $more = $("<option class='disabled>See more...</option>");
            $(this).append($more);
        });


        var options_sel_idx = 0;

        $("select").on("change", this, function(event) {
            if ($(this.options[this.selectedIndex]).hasClass("disabled")) {
                alert("a");
                this.selectedIndex = options_sel_idx;
            } else {
                options_sel_idx = this.selectedIndex;
            }
        });
    });
</script>


.残疾人{
颜色：#808080；
}
jQuery（函数（$）{
$（“选择”）。每个（函数（）{
var$more=$（“这很有效

<style type="text/css">
    .disabled {
        color: #808080;
    }
</style>


<script type="text/javascript">
    jQuery(function($) {
        $("select").each(function() {
            var $more = $("<option class='disabled>See more...</option>");
            $(this).append($more);
        });


        var options_sel_idx = 0;

        $("select").on("change", this, function(event) {
            if ($(this.options[this.selectedIndex]).hasClass("disabled")) {
                alert("a");
                this.selectedIndex = options_sel_idx;
            } else {
                options_sel_idx = this.selectedIndex;
            }
        });
    });
</script>


.残疾人{
颜色：#808080；
}
jQuery（函数（$）{
$（“选择”）。每个（函数（）{
var$more=$（“我将以前的值存储在oldValue中，然后如果是“查看更多…”，我将恢复旧值：


jQuery（函数（$）{
风险价值；
$（“选择”）。在（'focus'，函数（）{
oldValue=此.value；
}).改变（功能）{
if（this.value==“查看更多…”）{
$（“选择”）.val（旧值）；
}
oldValue=此.value；
}).each（函数（{
var$more=$（“查看更多…”）
.on（“单击”，函数（）{
警惕（“在这里放上你喜欢的AJAX对话”）；
})
。附于（$（本））；
});
})；

选择“查看更多…”了解更多选项：

加拿大
美国
法国
联合王国
我将以前的值存储在oldValue中，如果是“查看更多…”，我将恢复旧值：


jQuery（函数（$）{
风险价值；
$（“选择”）。在（'focus'，函数（）{
oldValue=此.value；
}).改变（功能）{
if（this.value==“查看更多…”）{
$（“选择”）.val（旧值）；
}
oldValue=此.value；
}).each（函数（{
var$more=$（“查看更多…”）
.on（“单击”，函数（）{
警惕（“在这里放上你喜欢的AJAX对话”）；
})
。附于（$（本））；
});
})；

选择“查看更多…”了解更多选项：

加拿大
美国
法国
联合王国
试试这个



jQuery（函数（$）{
$（“选择”）。每个（函数（）{
var$more=$（“查看更多…”）
.prop（“只读”，真）
。附于（$（本））；
});
var previousState=“”；
$（“选择”）。在（'focus'，函数（）{
previousState=this.value；
}).更改（功能（e）{
if（$（this.val（）==“preserve”）{
$（“选择”）.val（以前的状态）；
警惕（“在这里放上你喜欢的AJAX对话”）；
}
previousState=this.value；
});
});
加拿大
美国
法国
联合王国
试试这个



jQuery（函数（$）{
$（“选择”）。每个（函数（）{
var$more=$（“查看更多…”）
.prop（“只读”，真）
。附于（$（本））；
});
var previousState=“”；
$（“选择”）。在（'focus'，函数（）{
previousState=this.value；
}).更改（功能（e）{
if（$（this.val（）==“preserve”）{
$（“选择”）.val（以前的状态）；
警惕（“在这里放上你喜欢的AJAX对话”）；
}
previousState=this.value；
});
});
加拿大
美国
法国
联合王国
尝试在
单击事件时使用全局变量保存旧值。在
onchange
事件中传递ajax函数


jQuery（函数（$）{
$（“选择”）。每个（函数（）{
$（“请参阅更多…”）。附录（$（此））；
});
var old；
$（“选择”）。在（'单击'，函数（）上{
old=$（this.val（）；
})
$（'select'）。在（'change'，function（）上{
如果（$（this）.val（）=='extra'）{
//做事
log（“在这里放上你喜欢的AJAX对话”）；
$（this.children（'option'）.eq（$（this.val（old.index（））.prop（'selected'，true））；
}
})
})；

选择“查看更多…”了解更多选项：

加拿大
美国
法国
联合王国
尝试在
单击事件时使用全局变量保存旧值。在
onchange
事件中传递ajax函数


jQuery（函数（$）{
$（“选择”）。每个（函数（）{
$（“请参阅更多…”）。附录（$（此））；
});
var old；
$（“选择”）。在（'单击'，函数（）上{
old=$（this.val（）；
})
$（'select'）。在（'change'，function（）上{
如果（$（this）.val（）=='extra'）{
//做事
log（“在这里放上你喜欢的AJAX对话”）；
$（this.children（'option'）.eq（$（this.val（old.index（））.prop（'selected'，true））；
}
})
})；

选择“查看更多…”了解更多选项：

加拿大
美国
法国
联合王国
简而言之：


整体禁用的
idea与浏览器不兼容（Chrome不会捕捉点击事件）

最简单的方法（手动跟踪值变化）似乎是最好的


经过一些改进后，我的最终代码如下所示：


jQuery（函数（$）{
$（“选择”）。每个（函数（）{
变量$select=$（此）
.附加(
$（“查看更多…”）。addClass（“查看更多”）
)
.on（“更改”，函数（）{
变量$selectedOption=$select.find（“选项：选中”）；
if（$selectedOption.hasClass（“查看更多”））{
$select.val（selectedValue）；
警惕（“在这里放上你喜欢的AJAX对话”）；
}否则{
selectedValue=$selectedOption.val（）；
}
});
var selectedValue=$select.find（“选项：selected”）.val（）；
});
})；
。请参阅更多{
颜色：绿色；
}

选择“见m”