layui表单的ajax联动,layui的select联动实现代码

要实现联动效果注意两点：

第一要可以监听到select的change事件；

第二异步加载的内容，需要重新渲染后才可以正常使用。

html结构：

所在省份：

请选择省份

${provincelist.fullname}

#list>

所在城市：

所在区域：

js：

layui.use(['layer', 'form'], function(){

var layer = layui.layer

,form = layui.form;

form.on('select(myselect)', function(data){

var areaId=(data.value).replaceAll(",","");

$.ajax({

type: 'POST',

url: '/shopInfo/findCity',

data: {areaId:areaId},

dataType: 'json',

success: function(data){

$("#City").html("");

$.each(data, function(key, val) {

var option1 = $("").val(val.areaId).text(val.fullname);

$("#City").append(option1);

form.render('select');

});

$("#City").get(0).selectedIndex=0;

}

});

1.select的chage监听事件使用

form.on('select(myselect)', function(data){}) 其中myselect是select的 lay-filter属性值

2.数据异步加载到select的option中之后，点击该select会发现layui的选中效果不起作用，需要使用form.render('select');重新渲染一次，就可以正常使用。

以上这篇layui的select联动实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

layui表单的ajax联动,layui的select联动实现代码相关推荐

layui表单提交使用form.on(‘submit(sub)‘,function (){}) 使用ajax请求时回调不执行的原因及解决方法
layui表单提交使用form.on('submit(sub)',function (){}) 使用ajax请求时回调不执行的原因及解决方法参考文章: (1)layui表单提交使用form.on(' ...
layui 表单动态添加、删除input框
html部分 <div class="layui-form-item" ><label class="layui-form-label"> ...
layui的form表单提交数据，layui的select框默认选中
1.提交数据 1.1html <form class="layui-form" action="" method=""> < ...
layui表单验证内置自定义规则 - 使用说明
关于 layui表单的验证规则.调用.自定义规则的使用经验总结: 除了 layui 本身配套的一个验证体系,还支持开发者自定义验证规则(如上表中的[自定义密码验证(代码参考下文)]),并直接嵌入到页面 ...
Layui表单复选框验证
Layui表单复选框验证近日由于项目原因使用layui框架进行开发,在做表单验证的时候苦于复选框验证问题找不到答案,于是作为小白的我换了一种思路,不采用官方提供的form-verify,而是采用在提 ...
Layui表单验证失效解决办法
出现layui表单提交时没有进行验证的情况解决办法 <div class="layui-input-inline" style="width: 150px;&quo ...
vueform表单文件上传_峰哥说技术系列-8.Spring Boot文件上传(Form表单和Ajax方式)
今日份主题 Spring Boot文件上传(Form表单和Ajax方式) 在Spring Boot中,和文件上传的主要和MultipartResolver接口有关,他有两个实现类 StandardSe ...
ajax 模拟表单提交,Ajax模拟Form表单提交，含多种数据上传
---恢复内容开始--- Ajax提交表单.使用FormData提交表单数据和上传的文件(这里的后台使用C#获取,你可以使用Java一样获取) 有时候前台的数据提交到后台,不想使用form表单上传,希 ...
Django框架之 Form表单和Ajax上传文件
Django框架之 Form表单和Ajax上传文件浏览目录 Form表单上传文件 Ajax上传文件伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...

layui表单的ajax联动,layui的select联动实现代码

layui表单的ajax联动,layui的select联动实现代码相关推荐

最新文章

热门文章