wg-basic-doc/docs/code-template/select.md

62 lines
1.6 KiB
Markdown
Raw Normal View History

2022-05-25 18:33:19 +08:00
# 下拉选择
2022-06-02 17:47:13 +08:00
## 静态选择
2022-05-25 18:33:19 +08:00
2022-06-02 17:47:13 +08:00
表单
2022-05-25 18:33:19 +08:00
```html
<div class="layui-form-item">
<label class="layui-form-label"></label>
<div class="layui-input-block">
2022-06-02 17:47:13 +08:00
<select id="selector" name="selector" lay-filter="selectorSelect">
<option value="">选择类型</option>
<option value="type1">类型1</option>
<option value="type2">类型2</option>
</select>
2022-05-25 18:33:19 +08:00
</div>
</div>
```
2022-06-02 17:47:13 +08:00
列表
2022-05-25 18:33:19 +08:00
2022-06-02 17:47:13 +08:00
```html
<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>
2022-05-25 18:33:19 +08:00
```
2022-06-02 17:47:13 +08:00
## 基于JQuery的动态选择
2022-05-25 18:33:19 +08:00
html
```html
<div class="layui-form-item">
2022-06-02 17:47:13 +08:00
<label class="layui-form-label"></label>
2022-05-25 18:33:19 +08:00
<div class="layui-input-block">
2022-06-02 17:47:13 +08:00
<select id="selector" name="selector" lay-filter="selectorSelect"></select>
2022-05-25 18:33:19 +08:00
</div>
</div>
```
js
```javascript
// 初始化
2022-06-02 17:47:13 +08:00
function initSelect(callback) {
top.restAjax.get(top.restAjax.path('url', ['']), {}, null, function(code, data) {
$('#selector').append('<option value="">请选择</option>');
2022-05-25 18:33:19 +08:00
$.each(data, function (index, item) {
2022-06-02 17:47:13 +08:00
$('#selector').append('<option value="+ item.dataName +" '+ (index === 0 ? 'selected' : '') +'>'+ item.dataName +'</option>');
2022-05-25 18:33:19 +08:00
});
// 渲染表单下拉框
form.render(null, 'dataForm');
callback ? callback() : null;
}, function(code, data) {
top.dialog.msg(data.msg);
})
}
```