解决Chosen-Select初始化下拉框时闪现的问题

最新推荐文章于 2024-02-20 14:11:40 发布

CoreCmd

最新推荐文章于 2024-02-20 14:11:40 发布

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html chosen jquery css

本文链接：https://blog.youkuaiyun.com/MasterAjoe/article/details/108334982

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个在使用Chosen-Select插件时常见的初始化闪现问题，并提供了解决方案。通过将原生select元素设置为display:none，避免了页面加载时的视觉干扰，优化了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中用chosen-select的时候，我的代码是这样写的：

HTML代码：

<div class="row">
    <div class="col-lg-4">
        <label>多选框测试:</label>
        <select id="multipleSelect" multiple="multiple" class="chosen-select" data-placeholder="请选择">
            <option value="">请选择</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
        </select>
    </div>
    <div class="col-lg-4">
        <label>单选框测试:</label>
        <select id="singleSelect" class="chosen-select" data-placeholder="请选择">
            <option value="">请选择</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
        </select>
    </div>
</div>

JS代码：

$(document).ready(function () {
            var $multipleSelect = $('#multipleSelect');
            $multipleSelect.chosen({
                width:'100%',//宽度占满父容器
                search_contains:true//模糊搜索开启
            });

            var $singleSelect = $('#singleSelect');
            $singleSelect.chosen({
                width:'100%',//宽度占满父容器
                search_contains:true//模糊搜索开启
            });
        });

页面初始化完成后的结果：

在这里插入图片描述
这里的效果是页面初始化完毕后的，看起来没啥问题，但是刚进入页面时，会看到两个下拉框有闪现的问题，看起来影响用户体验；

解决办法：

思路： chosen-select的初始化，是把原生的select给隐藏掉，然后再把新生成的元素显示出来；页面上出现闪现的问题就是chosen-select把原生的下拉框隐藏的过程；一开始原生的下拉框显示，初始化后，原生的隐藏；因此就会出现短暂的页面元素闪现的问题；因此，可以考虑一开始就把原生的select隐藏掉，这样就不会出现闪现效果了: style="width: 100%;display: none"

优化后的HTML代码：

<div class="row">
    <div class="col-lg-4">
        <label>多选框测试:</label>
        <select id="multipleSelect" multiple="multiple" style="width: 100%;display: none" class="chosen-select" data-placeholder="请选择">
            <option value="">请选择</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
        </select>
    </div>
    <div class="col-lg-4">
        <label>单选框测试:</label>
        <select id="singleSelect" style="width: 100%;display: none" class="chosen-select" data-placeholder="请选择">
            <option value="">请选择</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
        </select>
    </div>
</div>