下拉列表 ui.select

下拉列表结构

    <div class="select ">                    
        <div class="selected">全站</div>                    
        <input type="hidden" name="category_id" value="0">
        <ul class="options" style="display: none;">
            <li class="cur" data-val="0">全站</li>
            <li class="" data-val="1">栏目A</li>
            <li class="" data-val="2">栏目B</li>
        </ul>
    </div>

• 使用下拉列表控件时不需要考虑样式问题
• 所有下拉列表控件需遵循这样的一个结构

呈现样式

具体效果可参见 http://www.kuaizhan.com/ui/ui-create

创建一个下拉列表

使用接口 ui.select 可以动态地创建一个下拉列表

参数（以JS Object形式给出）：
    class: 在下拉列表最外层添加class,便于添加额外的样式或者功能
    name: 设置input hidden标签的name,便于之后获取数据
    options: 下拉列表数据
        [
            {
                name: 下拉列表中每一项显示名称(字符串)
                value: 下拉列表中每一项对应的值(字符串)
                cur: 是否为当前显示(true或者false,列表中只能有一项为false)
                disabled: 当前下拉列表项是否可以选择(true或者false)
            },
            ...
        ]
    不需要使用的参数可以直接省略

示例代码:

        //put select
        var form = $("#js-form-put-select");

        //获取下拉列表html
        var select = ui.select.create({
            "class": "category-type",
            "name": "category_id",
            "options": [
                {
                    "name": "全站",
                    "value": "0",
                    "cur": true
                },
                {
                    "name": "栏目A",
                    "value": "1",
                    "disabled": true
                },
                {
                    "name": "栏目B",
                    "value": "2"
                }
            ]
        });

        form.find(".js-put-select").replaceWith(select);
        //绑定下拉列表相关事件
        ui.select.init(form);

        //针对下拉列表数据变化进行处理
        form.on("change", "input[name='category_id']", function () {
            //数据变化需要执行的逻辑写在这里
        });