美化 - DropDownList控件

地址：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>