menghuan0625
menghuan0625

select2插件的disabled功能详解

最近做项目用到了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 的显示如下，下拉框变成了不可用状态

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 均能正常显示。

你可能感兴趣的:(web前端)