layui实现下拉选择器,选择性别,0男1女,提交表单时获取数据
时间: 2024-04-13 14:28:31 浏览: 188
要在layui中实现下拉选择器,可以使用 layui 的 form 模块和 select 组件来实现。以下是一个示例代码,演示如何实现下拉选择器,并在提交表单时获取选中的数据:
HTML代码:
```html
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<select name="gender" lay-verify="required">
<option value="">请选择</option>
<option value="0">男</option>
<option value="1">女</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="submitForm">提交</button>
</div>
</div>
</form>
```
JavaScript代码:
```javascript
// 引入layui模块
layui.use(['form'], function() {
var form = layui.form;
// 监听表单提交事件
form.on('submit(submitForm)', function(data) {
// 获取选择的性别值
var gender = data.field.gender;
// 打印获取的性别值
console.log('选择的性别:', gender);
// TODO: 在这里可以进行表单提交等操作
return false; // 阻止表单默认提交
});
});
```
在上述示例中,我们使用 layui 的 form 模块监听了表单的提交事件,并通过 `data.field.gender` 获取到了选中的性别值。你可以根据自己的需求,进一步处理获取到的数据,比如提交到后台进行保存等操作。
阅读全文