最近做项目用到了select2插件,需求中需要给下拉框设置默认值之后,禁用下拉框,我开始的写法是这样的:
<select class="js-example"></select>
<script type="text/javascript">
$(function(){
$(".js-example").select2();
$(".js-example").val("CA").trigger("change"); //设置默认值
$(".js-example").prop("disabled", true); //设置下拉框不可用
});
</script>
这个写法在 Chrome Firefox IE11 的显示如下,下拉框变成了不可用状态
但是在IE7、IE8、IE9、IE10 仍然是可用状态。
下面说最重要的部分,我把代码稍微修改一下,IE就都正常了,正确的代码如下:
<select class="js-example"></select>
<script type="text/javascript">
$(function(){
$(".js-example").select2();
$(".js-example").val("CA").trigger("change"); //设置默认值
});
$(".js-example").prop("disabled", true); //设置下拉框不可用
</script>
如你所看到的,调整了一下 禁用下拉框的代码 的位置。
注意下面这段代码的位置,一定要写在select框下面,并且不要写在 $(function(){}); 中
$(".js-example").prop("disabled", true);
经过测试,这段代码在 Chrome Firefox IE7-IE11 均能正常显示。