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