地址:http://www.baidufe.com/component/dropdownlist/index.html
效果:
引用JS文件:
<link href="Js/DropDownList/dropdownlist.css" rel="stylesheet" />
<script src="Js/DropDownList/dropdownlist.js"></script>
JavaScript代码:
<script type="text/javascript">
$(document).ready(function () {
// 通过原生select控件创建自定义下拉框
var ddl_picture = DropDownList.create({
select: $('#ddl_picture'),
attrs: {
column: 4,
width: 150
}
});
// 通过原生select控件创建自定义下拉框
var ddl_picture = DropDownList.create({
select: $('#ddl_picture_2'),
attrs: {
column: 4,
width: 150
}
});
// 通过原生select控件创建自定义下拉框
var ddl_picture = DropDownList.create({
select: $('#ddl_picture_3'),
attrs: {
column: 5,
width: 150
}
});
})
</script>
Html代码:
<table>
<tr> <td >
<select id="ddl_picture">
<option value="d1" selected="selected">松园一号</option>
<option value="d2">松园二号</option>
<option value="d3">松园三号</option>
<option value="d4">松园四号</option>
</select>
</td> <td style ="padding-left:10px;">
<select id="ddl_picture_2">
<option value="f1" selected="selected">一层</option>
<option value="f2">二层</option>
<option value="f3">三层</option>
<option value="f4">四层</option>
</select>
</td>
<td style ="padding-left:10px;">
<select id="ddl_picture_3">
<option value="r1" selected="selected">446</option>
<option value="r2">447</option>
<option value="rf3">448</option>
<option value="r4">449</option>
<option value="r2">447</option>
<option value="rf3">448</option>
<option value="r4">449</option>
<option value="r2">447</option>
<option value="rf3">448</option>
<option value="r4">449</option>
<option value="r2">447</option>
<option value="rf3">448</option>
<option value="r4">449</option>
</select>
</td>
</tr>
</table>