vselect demo
基本用法
原选择框:变形之后: <- 点击看看
<code>
<select id="basic_select_after">很多options</select>
<script type="text/javascript">
$(function(){
// 变形
$("#basic_select_after").vselect();
});
</script>
属性设置
$("#xxx").vselect({
在这里设置xxx的属性
});
长长的条:
默认选中:
自动分列:
控制方向:
支持多选: 提交之后的数据格式: 1|^|2|^|3...
自定格式:
多标签:
属性大全
| 属性名 | 值类型 | 说明 |
|---|---|---|
| width | 数字或百分比 | 控制vselect宽度，如果不设置，就使用vselect.css的预设宽度(200px) |
| 默认选中 | 特性 | 支持原生的<option selected> |
| 自动分列 | 特性 | 下拉框默认最大高度320px，当option太多，高度超过该值，将自动分成多列 |
| maxHeight | 数字 | 控制下拉框最大高度，默认320 (px) |
| maxColumn | 数字 | 自动分列的最多列数，默认5 (列)，当达到最多列数, 仍然还有option没显示完, vselect会增加下拉框的高度 (即无视maxHeight) |
| direction | top bottom center |
控制下拉框弹出方向，默认是center (水平不变，垂直扩大显示) |
| styleString | css | 为这个vselect指定css，例如: "border-color:red;" |
| 分标签 | 特性 | 支持原生的 <optgroup label="xx"> |
事件支持
数值改变时:
下拉框出现:
下拉框消失:
事件大全
| 事件名 | 说明 |
|---|---|
| change | 当用户点选下拉框内容时触发 |
| show | 当下拉框出现之后触发 |
| hide | 当下拉框收起之后触发 |
多级联动
选分类:
原理：使用 change 事件, 在其中调用 $("#second").vselectReset({二级下拉框的json数据});
这样二级下拉框的内容就跟着更新了