layui下拉菜单实现空闲病床号展示源码
时间: 2023-06-29 13:06:04 浏览: 49
以下是基于 layui 的下拉菜单实现空闲病床号展示的源码:
HTML 代码:
```html
<div class="layui-form-item">
<label class="layui-form-label">病床号</label>
<div class="layui-input-inline">
<select name="bedNumber" lay-verify="required" lay-search>
<option value="">请选择病床号</option>
<option value="001">001</option>
<option value="002">002</option>
<option value="003">003</option>
<!-- 更多选项 -->
</select>
</div>
</div>
```
JS 代码:
```javascript
// 模拟获取空闲病床号列表
function getFreeBedNumbers() {
// 假设从后端获取空闲病床号列表为 ["001", "002", "003"]
return ["001", "002", "003"];
}
// 初始化下拉菜单
layui.use(['form', 'jquery'], function () {
var form = layui.form;
var $ = layui.jquery;
// 获取空闲病床号列表
var freeBedNumbers = getFreeBedNumbers();
// 动态生成选项
var options = '<option value="">请选择病床号</option>';
for (var i = 0; i < freeBedNumbers.length; i++) {
options += '<option value="' + freeBedNumbers[i] + '">' + freeBedNumbers[i] + '</option>';
}
$('select[name=bedNumber]').html(options);
// 重新渲染表单
form.render();
});
```
当页面加载完成后,会调用 `getFreeBedNumbers()` 函数获取空闲病床号列表,然后动态生成下拉菜单选项并渲染到页面中。用户选择病床号后,可以通过 `$('select[name=bedNumber]').val()` 获取选中的病床号。