下拉多选框的实现

最新推荐文章于 2024-06-11 16:39:30 发布

若久2023

最新推荐文章于 2024-06-11 16:39:30 发布

阅读量6.6k

点赞数 1

文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_44357719/article/details/108002810

版权

这两天在写一个chrome插件，需要在popup页使用下拉多选框。用select看起来非常原始，多选还要按住ctrl键或者command键。
html代码如下：

<html>
    <head>
        <title>用select实现下拉多选框</title>
    </head>
    <body>
        <select class="demo" multiple="multiple">  
            <option value="cp">C++</option>  
            <option value="cs">C#</option>  
            <option value="oc">Object C</option>  
            <option value="c">C</option>  
        </select> 
    </body>
</html>

效果如下，真是。。。

看来必须要有css的加持，否则真是不堪入目。但是买的《CSS揭秘》一页还没看，远水解不了近渴。先在网上找找吧。
在free.js上找到了一个好方法。鉴于自己对html/css和jQuery只是一知半截，认真看了一遍free.js提供的代码，也算是学习了css和jQuery的实战用法。
先看下效果，一样的select，不一样的味道。css和jquery真是能化腐朽为神奇啊。

在这里插入图片描述
html代码：

<html>
    <head>
        <link href="fSelect.css" rel="stylesheet" type="text/css">
        <title>用select+css实现下拉多选框</title>
    </head>
    <body>
        <select class="demo" multiple="multiple">  
            <optgroup label="Languages">  
                <option value="cp">C++</option>  
                <option value="cs">C#</option>  
                <option value="oc">Object C</option>  
                <option value="c">C</option>  
            </optgroup>  
            <optgroup label="Scripts">  
                <option value="js">JavaScript</option>  
                <option value="php">PHP</option>  
                <option value="asp">ASP</option>  
                <option value="jsp">JSP</option>  
            </optgroup>  
        </select>  

        <script src="jquery-1.11.3.min.js"></script>
        <script src="fSelect.js"></script>
        <script>
        $(function() {
                $('.demo').fSelect();
            });
        </script>
    </body>
</html>

这里除了用到了select的multiple属性，还用到了optgroup属性。这个属性能将option分组。
除此之外，我们在html中还加了新的调料：css和jquery。
jquery和fSelect.js改变了html的样子。脚本执行后的html是这个样子的：

在这里插入图片描述
那么，我们怎么施了魔法，把html变了样呢？
先从入口说起吧。在前的

  $(function() {
        $('.demo').fSelect();
    });

这里用了两个简写，一个是 $(. . .) 是 j Q u e r y (. . .) 的简写。另一个简写是$ (function() {…});，它的全写形式是：

$(document).ready(function(){...})

ready函数能保证在页面就绪后再调用我们写的匿名函数。其实这有点多此一举，因为这个函数已经是紧挨着之前了，函数的位置可以保证脚本运行前HTML已经加载到DOM里面。
剥开这个函数，可以看到核心代码是 $KaTeX parse error: Expected 'EOF', got '#' at position 396: \dotslor_FFFFFF,t_70#̲pic_center) 主函数\dots$ ) {…})(jQuery)。这又是一种惯用法，定义一个匿名函数（函数参数是 $，其实就是 j Q u e r y ），然后马上调用这个匿名函数。这个函数的作用是把一些自定义的函数和属性注入到 j q u e r y 或者 D O M 里面。第三行$ .fn.fSelect = function(options) {…}就是给 $KaTeX parse error: Expected 'EOF', got '#' at position 262: \dotslor_FFFFFF,t_70#̲pic_center) 第21\dots$ select，属性名有点奇怪，这是jquery的习惯用法，为保存jquery对象的变量都以$开头。
让我们再看下原型方法create。顺便说下，原型在js有非常大的作用，通过原型可以实现继承，动态增删属性，改变对象行为。
回到create：

32行-33行，是把select包到一个新的div里面。因为html定义的select带有multiple属性，这个div属于两个class（fs-wrap和multiple）。
34行：在select之前插入两个div（类分别为fs-label-wrap和fs-lable）和一个span（类为fs-arrow）。
35行：再在select之前插入两个div（类分别为fs-dropdown hidden和fs-options）。这两个div比34行加的两个div更靠近select*。
36行：select加入到类hidden，把select整个元素都设置为不可见。
37行：又定义一个jquery变量，$wrap，保存当前select 的第一个类为fs-wrap**的祖先元素。
38行：调用另一个原型方法reload。
reload：
43-47行：在类fs-dropdown（一个div）的开始标签之后插入一个用于搜索的div（类为fs-search）。
48行：根据select的options，生成用div实现的新choices。
49行：把新生成的choices插入到fs-options类的div中。
50行：调用reloadDropdownLabel，将用户选中的options更新到fs-label中，并触发select的change事件。
让我们再看看option的点击事件响应：

在这里插入图片描述
159-174行：把选中的options保存到selected数组中。
176行：根据selected，更新select的选中options。
177行：调用reloadDropdownLabel，将用户选中的options更新到fs-label中，并触发select的change事件。
从上面代码分析可以看出，select一开始就隐藏起来了，我们看到的和操作的都是脚本生成的div。然后div的变化会联动到select上，并触发它的change事件。

若久2023

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
下拉多选框的实现

这两天在写一个chrome插件，需要在popup页使用下拉多选框。用select看起来非常原始，多选还要按住ctrl键或者command键。html代码如下：<html> <head> <title>用select实现下拉多选框</title> </head> <body> <select class="demo" multiple="multiple">
复制链接

扫一扫