美化 - DropDownList控件

<link href="Js/DropDownList/dropdownlist.css" rel="stylesheet" />
<script src="Js/DropDownList/dropdownlist.js"></script>

<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>

<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>