插件学习记录(1)-comboselect

来源：互联网发布：知乎招商银行上分编辑：程序博客网时间：2024/06/06 00:24

今天使用了一下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>

阅读全文

1 0