wg-basic-doc/docs/code-template/select.md
2022-06-02 17:47:13 +08:00

1.6 KiB
Raw Blame History

下拉选择

静态选择

表单

<div class="layui-form-item">
    <label class="layui-form-label"></label>
    <div class="layui-input-block">
        <select id="selector" name="selector" lay-filter="selectorSelect">
            <option value="">选择类型</option>
            <option value="type1">类型1</option>
            <option value="type2">类型2</option>
        </select>
    </div>
</div>

列表

<div class="layui-inline layui-form search-item">
    <select id="type" name="type" lay-filter="typeFilter">
        <option value="">选择类型</option>
        <option value="type1">类型1</option>
        <option value="type2">类型2</option>
    </select>
</div>

基于JQuery的动态选择

html

<div class="layui-form-item">
    <label class="layui-form-label"></label>
    <div class="layui-input-block">
        <select id="selector" name="selector" lay-filter="selectorSelect"></select>
    </div>
</div>

js

// 初始化
function initSelect(callback) {
    top.restAjax.get(top.restAjax.path('url', ['']), {}, null, function(code, data) {
        $('#selector').append('<option value="">请选择</option>');
        $.each(data, function (index, item) {
            $('#selector').append('<option value="+ item.dataName +" '+ (index === 0 ? 'selected' : '') +'>'+ item.dataName +'</option>');
        });
        // 渲染表单下拉框
        form.render(null, 'dataForm');
        callback ? callback() : null;
    }, function(code, data) {
        top.dialog.msg(data.msg);
    })
}