jQuery WEUI select的使用

jQuery WEUI select的使用

1.官网样式:

jQuery WEUI select的使用_第1张图片

html样式

<div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">联系人</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" id='job' placeholder="请输入你的联系人">
            </div>
        </div>
</div>

JavaScript

$("#job").select({
  title: "选择职业",
  items: ["法官", "医生", "猎人", "学生", "记者", "其他"]
});

2.数据从数据库获取:

JavaScript

 $.ajax({
            url: '/demo/job',//url路径
            datatype: "json",//数据类型
            success: function (data) {
                if (data) {
                    var datalist = new Array;
                    //遍历数据,获取数组的id和name
                    for (var i = 0; i < data.length; i++) {
                        var info = {"title": data[i].name, "value": data[i].id};
                        datalist.push(info);
                    }
                    console.log(datalist);
                    $("#job").select({
                        title: "职业",
                        multi: false,//单选
                        items: datalist,
                        beforeClose: function (values, titles) {

                          /*  if () {
                                $.toast("错误提示", "cancel");
                                return false;
                            }*/
                            return true;
                        }
                    });
                }
            }
        });

你可能感兴趣的:(jQuery WEUI select的使用)