js实现带复选框的多选下拉框

最新推荐文章于 2024-08-30 16:00:39 发布

我的小狗很很可爱

最新推荐文章于 2024-08-30 16:00:39 发布

阅读量4k

点赞数 2

分类专栏： JavaScript 文章标签： jquery javascript

本文链接：https://blog.csdn.net/chhpearl/article/details/109800582

版权

在不使用任何框架的纯JS项目中，需要创建一个可多选的下拉框。本文介绍了三种实现方式：1) 使用multiple-select.js插件，但因网络限制和效果不符未采用；2) div+ul&li方式，但在处理值时不够理想；3) 修改后的div+定位方法，适合于JS操作。通过理解原理，自行编写组件，主要分为静态页面布局和点击事件处理两部分。

摘要由CSDN通过智能技术生成

最近被派去做一个不使用任何框架的纯js的项目，界面属于那种机器的界面，算是中规中矩的。新特性需要用原生的js或者jq写一个可多选的下拉框，实现的方式有很多。网上常见的有以下几种：

1.下载multiple-select.js插件，由于公司使用网络的限制，下载插件不方便，而且这个最后的效果也不是我想要的，所以没有采用这种实现方法。

2.网上还有常见的 div+ul&li 的实现，这种也比较方便，不过在处理值的时候，感觉不like~，最后也没有选择这种方法。

3.使用div+定位：（根据上面方法2修改得到，个人感觉在取值赋值等js操作时很方便）

--> HTML代码：

<div id="selectMore">
    <div class="ulstyle">
        <div class="listyle">
            <input type="checkbox" id="AAA"/>
                <label>AAA</label>
        </div>
        <div class="listyle">

最低0.47元/天解锁文章