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);
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
```
|