1. 前言
在web开发中,页面交互是非常重要的一部分。而在表单交互中,select
是很常见的组件。有时候我们需要通过js代码修改select
的值,本文将介绍layui如何实现select
的值修改。
2. 前置条件
在介绍layui修改select
的值方法前,我们需要做好下面这些前置准备工作:
2.1 引入layui
由于layui提供了丰富的组件,而且使用起来十分简单方便,因此本文使用layui框架来演示。我们需要在html页面中引入layui的js和css文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layui修改select的值的方法</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
</head>
<body>
...
</body>
</html>
2.2 定义select组件
接着我们需要在html页面中定义select
组件,下面是一个示例:
<select name="city" lay-verify="required">
<option value="">请选择城市</option>
<option value="shenzhen">深圳</option>
<option value="beijing">北京</option>
</select>
上面的代码中,我们定义了一个select
组件,包含三个选项,用户需要从中选择一个城市。其中 name="city"
是select
组件的name属性,lay-verify="required"
是用于表单验证的属 性, 表示选择成为必填项。
3. layui修改select的值方法详解
当我们前置条件准备好后,我们可以来看看如何使用layui修改select
的值。layui提供了2种方法帮我们完成这个任务。
3.1 方法一——使用渲染方法
layui提供了一个 form.render('select')
方法, 可以在layui渲染表单对象后,重新渲染下拉框,页面可以得到更新。因此,在页面初始化时,我们需要在表单中加入<span></span>
(必须有),然后用form.render('select')
函数渲染页面即可。
这种方法的代码如下:
<div class="layui-form-item">
<label class="layui-form-label">城市选择</label>
<div class="layui-input-inline">
<select id="city" name="city" lay-verify="required">
<option value="">请选择城市</option>
<option value="shenzhen">深圳</option>
<option value="beijing">北京</option>
</select>
<span></span>
</div>
</div>
// 通过id获取select组件
var city = document.getElementById("city");
// 设置select组件选中的值
city.value='beijing';
// 重新渲染下拉框
layui.form.render('select');
上面的代码实现了将select
的值设置为“北京”,并重新渲染下拉框。可以看出,方法一比较简单,但是一定要注意将<span>
标签加上,否则会出现闪退的问题。
3.2 方法二——触发事件
layui还提供了类似于jquery的事件机制。我们可以触发select
的 change
事件,从而实现修改select
的值。代码如下:
<div class="layui-form-item">
<label class="layui-form-label">城市选择</label>
<div class="layui-input-inline">
<select id="city" name="city" lay-verify="required">
<option value="">请选择城市</option>
<option value="shenzhen">深圳</option>
<option value="beijing">北京</option>
</select>
</div>
</div>
// 通过id获取select组件
var city = document.getElementById("city");
// 设置select组件选中的值
city.value='beijing';
// 触发select组件的change事件
$(city).trigger('change');
上面的代码实现了将select
的值设置为“北京”,并触发select
组件的change
事件。
4. 总结
通过本文,我们了解了使用layui框架时,如何修改select
的值。layui提供了两种方法,一种是使用渲染函数form.render('select')
, 另一种是触发select
的change
事件。这两种方法都很简单,选择哪种方式主要取决于实际情况。