layui 表单元素的选中问题

来源:互联网 发布:手机qq java通用版 编辑:程序博客网 时间:2024/05/21 10:58

layui 表单元素的选中问题

layui对表单元素都作了美化,比如下拉列表,单选框,多选框.对表单美化后相应元素的操作,其实是在layui处理过后的div上操作,不能真的反映在原始我们编写的表单的元素上.这也会出现一个问题,如果想用JS对表单做些预处理,怎么做?操作原始的元素并不会展现在layui处理过的表单中的,那我们就对layui处理过的表单动手
这里要提两个我用过的,一个是单选框,一个是下拉列表
* 单选框,layui美化后,对应的type=radio的input项隐藏,在input之后追加了一个div,里面用i标签美化,所以我们需要做的事找到目标单选框的临近i标签,然后触发它的click事件
* 下拉框,layui把下拉框美化成了一个dl,每一个option标签都变成了一个dd标签表示,其中value更改为lay-value属性,我们要做的就是找到下拉框对应的dl标签,将符合要求值lay-valueddclick事件触发

下面是二者的示例代码

var update=$("#update-form")update.find("input[type=radio][value=female]").next().find("i").click();//将value是female的单选框选中update.find("dd[lay-value=value-i-need]").click();//将下拉列表value为value-i-need的项选中

多选框也是同样的道理,首先在页面上找出layui将其美化成了什么标签,有什么特点,然后看如何能选择出对应的条目

小问题

这里还有两个小问题
1. 关于layui导入组件的问题:layui导入组件使用layui.use()的方式,需要将所有关联到layui的JS,但又包含自己逻辑的代码都放到这里面,我试过把layui的变量导出成全局变量,并不能用,所以,按照官方说法,只能选择将所有JS代码包含到layui.use()里,或者在自己的代码里重复书写layui.use()来临时使用layui的组件
1. 关于图标不能正常显示的问题(多出现在表单),这个问题其实是上一个问题的延伸,原因就是没有使用layui.use()来导入layui的form组件

1 0