98 lines
2.7 KiB
Markdown
98 lines
2.7 KiB
Markdown
# 下拉选择
|
||
|
||
## 基于JQuery的下拉选择
|
||
|
||
### 直接选择
|
||
|
||
html
|
||
|
||
```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
|
||
|
||
```javascript
|
||
// 初始化
|
||
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);
|
||
})
|
||
}
|
||
```
|
||
|
||
### 选择并获取其他属性
|
||
|
||
以部门选择为例，选择部门既要获取部门名称，又要获取部门ID
|
||
|
||
html
|
||
|
||
```html
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">接种单位名称 *</label>
|
||
<div class="layui-input-block">
|
||
<input type="hidden" id="departmentId" name="departmentId" class="layui-input" value="" maxlength="36">
|
||
<select id="departmentName" name="departmentName" lay-filter="departmentNameFilter" lay-verify="required"></select>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
js
|
||
|
||
```javascript
|
||
// 初始化
|
||
function initDepartmentSelect(callback) {
|
||
top.restAjax.get(top.restAjax.path('api/department/list/0', []), {}, null, function(code, data) {
|
||
$('#departmentName').append('<option value="">请选择</option>');
|
||
$.each(data, function (index, item) {
|
||
$('#departmentName').append('<option value="'+ item.departmentName +'" data-department-id="'+ item.departmentId +'">'+ item.departmentName +'</option>');
|
||
});
|
||
// 渲染表单下拉框
|
||
form.render(null, 'dataForm');
|
||
callback ? callback() : null;
|
||
}, function(code, data) {
|
||
top.dialog.msg(data.msg);
|
||
})
|
||
|
||
// 添加监听事件
|
||
form.on('select(departmentNameFilter)', function(data) {
|
||
var value = data.value;
|
||
// 遍历 option 获取 option 上的属性
|
||
for(var i = 0, item; item = $(data.elem).children()[i++];) {
|
||
if(item.value == value) {
|
||
$('#departmentId').val(item.dataset.departmentId);
|
||
break;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
```
|
||
|
||
|
||
|
||
|
||
|
||
### 列表上的选择
|
||
|
||
```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>
|
||
``` |