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