插件学习记录(1)-comboselect

最新推荐文章于 2024-04-22 09:48:26 发布

Klingonsss

最新推荐文章于 2024-04-22 09:48:26 发布

阅读量6.9k

点赞数 2

分类专栏：前端插件文章标签：插件下拉框 jquery

本文链接：https://blog.csdn.net/qq_15241071/article/details/78424162

版权

前端插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天使用了一下comboselect，GitHub：点击打开链接，记录一下。

在html中引入

combo.select.css，jquery-3.2.1.min.js，jquery.combo.select.js

注意，因为comboselect依赖jquery，所以js的引入顺序jquery要在comboselect之前。

1.基本使用

下拉框代码如下：

<div class="comboMy">
    <select>
        <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>
        <option value="10月">10月</option>
        <option value="11月">11月</option>
        <option value="12月">12月</option>
    </select>
</div>

这里有一个技巧，在webstorm或者sublime里面(其它可能也可以，不过我没用过)，输入：select>option[value=$月]{$月}*12后按tab键可以自动生成上图的代码。

然后在<script></script>里面写代码就行啦：

$(function () {
    $('select').comboSelect();
})

2.分组展示

如果想配置分组，就用<optgroup>标签，代码如下：

<div class="comboMy">
    <select>
        <option value="">季节</option>
        <optgroup label="第一季">
            <option value="1月">1月</option>
            <option value="2月">2月</option>
            <option value="3月">3月</option>
        </optgroup>
        <optgroup label="第二季">
            <option value="4月">4月</option>
            <option value="5月">5月</option>
            <option value="6月">6月</option>
        </optgroup>
        <optgroup label="第三季">
            <option value="7月">7月</option>
            <option value="8月">8月</option>
            <option value="9月">9月</option>
        </optgroup>
        <optgroup label="第四季">
            <option value="10月">10月</option>
            <option value="11月">11月</option>
            <option value="12月">12月</option>
        </optgroup>

    </select>
</div>

然后同样的，

$(function () {
    $('select').comboSelect();
})

即可。

3.回调函数

用1中的为例，监听<select>的change事件即可：

$('select').change(function (e) {debugger
   alert('你选中了第'+(e.target.selectedIndex+1) + '项, ' + '值为: ' + e.target.value );
});

4.完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>comboSelect</title>
    <link type="text/css" rel="stylesheet" href="css/combo.select.css"/>
</head>
<body>
<div class="comboMy">
    <select>

            <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>
            <option value="10月">10月</option>
            <option value="11月">11月</option>
            <option value="12月">12月</option>

    </select>
</div>
<div class="comboMy">
    <select>
        <option value="">季节</option>
        <optgroup label="第一季">
            <option value="1月">1月</option>
            <option value="2月">2月</option>
            <option value="3月">3月</option>
        </optgroup>
        <optgroup label="第二季">
            <option value="4月">4月</option>
            <option value="5月">5月</option>
            <option value="6月">6月</option>
        </optgroup>
        <optgroup label="第三季">
            <option value="7月">7月</option>
            <option value="8月">8月</option>
            <option value="9月">9月</option>
        </optgroup>
        <optgroup label="第四季">
            <option value="10月">10月</option>
            <option value="11月">11月</option>
            <option value="12月">12月</option>
        </optgroup>

    </select>
</div>
</body>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.combo.select.js"></script>
<script type="text/javascript">
    $(function () {
        $('select').comboSelect();
    })
    $('select:first').change(function (e) {debugger
       alert('你选中了第'+(e.target.selectedIndex+1) + '项, ' + '值为: ' + e.target.value );
    });
</script>
</html>

Klingonsss

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
5
评论
插件学习记录(1)-comboselect

今天使用了一下comboselect，GitHub：点击打开链接，记录一下。在html中引入combo.select.css，jquery-3.2.1.min.js，jquery.combo.select.js注意，因为comboselect依赖jquery，所以js的引入顺序jquery要在comboselect之前。下拉框代码如下：class="comboMy">
复制链接

扫一扫