<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="../layui/css/layui.css" rel="stylesheet" />
<script src="../layui/layui.js"></script>
<script src="../layui/jquery-3.3.1.js"></script>
<title></title>
</head>
<body>
<form class="layui-form" action="">
<div>
<div class="layui-form-item">
<label class="layui-form-label">选择city</label>
<div class="layui-input-block">
<select name="cityname" id="cityid" lay-verify="required" lay-filter="cityfilter">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</div>
</div>

<div class="layui-form-item">
<label class="layui-form-label">选择区域</label>
<div class="layui-input-block">
<select name="quyuname" id="quyuid" lay-verify="required" lay-filter="quyufilter"></select>
</div>
</div>
</div>

<script>
layui.use('form', function () {
var form = layui.form;
layui.form.on('select(cityfilter)', function (data) {
if (data.value == "") {
$('#quyuid').html('<option value="">请选择区域</option>');
layui.form.render("select");
}
else {
if (data.value == "0") {
$('#quyuid').html('<option value="">请选择区域</option>')
$('#quyuid').append(new Option("北京1", 0));
$('#quyuid').append(new Option("北京2", 1));
$('#quyuid').append(new Option("北京3", 2));
$('#quyuid').append(new Option("北京4", 3));
}
else if (data.value == "1") {
$('#quyuid').html('<option value="">请选择区域</option>')
$('#quyuid').append(new Option("上海1", 0));
$('#quyuid').append(new Option("上海2", 1));
$('#quyuid').append(new Option("上海3", 2));
$('#quyuid').append(new Option("上海4", 3));
}
else if (data.value == "2") {
$('#quyuid').html('<option value="">请选择区域</option>')
$('#quyuid').append(new Option("广州1", 0));
$('#quyuid').append(new Option("广州2", 1));
$('#quyuid').append(new Option("广州3", 2));
$('#quyuid').append(new Option("广州4", 3));
}
else if (data.value == "3") {
$('#quyuid').html('<option value="">请选择区域</option>')
$('#quyuid').append(new Option("深圳1", 0));
$('#quyuid').append(new Option("深圳2", 1));
$('#quyuid').append(new Option("深圳3", 2));
$('#quyuid').append(new Option("深圳4", 3));
}
else if (data.value == "4") {
$('#quyuid').html('<option value="">请选择区域</option>')
$('#quyuid').append(new Option("杭州1", 0));
$('#quyuid').append(new Option("杭州2", 1));
$('#quyuid').append(new Option("杭州3", 2));
$('#quyuid').append(new Option("杭州4", 3));
}
layui.form.render("select");
//$.getJSON('@Url.Action("GetSelectCommunity", "Values", new { httproute = "DefaultApi", area = "" })' + "?id=" + data.value, function (data) {
// $('#ownscommunityId1').html('<option value="">请选择社区/村</option>')

// $.each(data, function (index, item) {
// $('#ownscommunityId1').append(new Option(item.Name, item.Code));// 下拉菜单里添加元素
// });
// layui.form.render("select");
//});
}
});
});
</script>
</form>
</body>
</html>

******注意：1.依赖加载模块： form（请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）

2.标签 form必不可少  否则下拉框 复选框等相关样式无法显示

layui下拉框实现级联的更多相关文章

  1. layui下拉框数据过万渲染渲染问题解决方案

    方案一:layui下拉框分页插件 https://fly.layui.com/jie/29002/ 此插件我用了下浏览器缓存有问题,而且当下拉框数据量过万后,会一直渲染不出来,期待后期作者优化 如图下 ...

  2. Layui下拉框改变时触发事件

    layui.use(['form', 'layer'], function () { var form = layui.form(); var layer = layui.layer; form.on ...

  3. layUI 下拉框遮挡

    原项目中把layui内置的富文本编辑器替换成了百度的ueditor,但是出现了一点问题,下拉框被遮挡了! 在网上查询了一些方法,发现最简单的方法就是在当前页面的<head>标签中加入 &l ...

  4. layui下拉框不显示的问题

    1.先检查有没有引入layui.js 2.然后看有没有被<form class="layui-form"></form>包住, 3.查看是否有以下代码 &l ...

  5. 【Layui】当Layui数据表格和Layui下拉框组合时发生的问题

    关于Layui数据表格用下拉框显示问题 如图所示 可以看见当点击下拉框时下拉选项被下拉框覆盖 此时你需要在数据表格渲染完成时的回调内添加如下代码即可 $(".sel_scrq"). ...

  6. layui下拉框后台动态赋值

    前台页面: <select name="xm" id="xm" lay-verify="required" lay-filter=&q ...

  7. layui下拉框渲染问题，以及回显问题

    最近实习公司给的新人练手项目用的layui,layui之前自己也接触过但是也就是用了用table组件,没有用过layer弹层这些东西,所以就了解了一下. 首先遇到的一个问题就是下拉框没有样式,然后加样 ...

  8. layui 下拉框 动态获取数据

    $(function(){var grade=$("#grade");grade.append("一年级"); //添加下拉列表grade.append(&qu ...

  9. layui 下拉框不显示解决方法

    添加以下代码 layui.use('form', function(){ var form = layui.form; form.render(); });

随机推荐

  1. 【linux】基础命令一

    ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ mount dir[] device[]umount devic[]maste ...

  2. 多测师讲解 _教师（必备）_高级讲师肖sir

    教学心得1.备课要充分,防止第二天上课会出现一些突发情况2.上课要有自己的思路,不一定要按照课件上的讲3.上课气氛比较沉闷的时候,可以适当的开下玩笑,缓解大家的学习氛围4.讲课的时候提醒学员不要做笔记 ...

  3. Rust之路（3）——数据类型 下篇

    [未经书面同意,严禁转载] -- 2020-10-14 -- 架构是道,数据是术.道可道,非常道:术不名,不成术!道无常形,术却可循规. 学习与分析数据类型,最基本的方法就是搞清楚其存储原理,变量和对 ...

  4. MeteoInfo脚本示例：读取FY3A AOD HDF文件

    FY3A卫星有AOD产品数据,HDF格式,这里示例用MeteoInfo脚本程序读取和显示该类数据. 脚本程序如下: #----------------------------------------- ...

  5. 485hub

    485hub 485hub ZLAN9480A是一款可通过一路RS485主口扩展出8路RS485从口的工业级隔离型8口RS485集线器.可以有效的实现RS485网络的中继.扩展与隔离. ZLAN948 ...

  6. linux centos 03

    linux用户权限相关 root用户  相当于qq群的群主 sudo命令  相当于qq群的管理员 普通用户  相当于qq群的 水军 超级用户root的UID是 0  组ID也是 0  普通用户的UID ...

  7. 使用python编写正逆序乘法表

    # 99乘法表 # 顺序 for i in range(1,10): n = 1 while n <= i: print('{}x{}={}'.format(n,i,n*i),end=' ') ...

  8. pytest文档46-关于https请求警告问题(InsecureRequestWarning: Unverified HTTPS request is being made)

    前言 使用 pytest 执行 https 请求用例的时候,控制台会出现警告:InsecureRequestWarning: Unverified HTTPS request is being mad ...

  9. Anderson《空气动力学基础》5th读书笔记 第2记——流体静力学初步

    与物体在水中受到水的浮力一样,空气中的物体也会受到空气的浮力,但由于这个浮力往往比较小,实际中的很多问题我们常常将它忽略,而对于像热气球这样的靠空气的浮力产生升力的飞行器来说,空气的浮力是不能忽略的. ...

  10. 在学习python的过程中，遇到的最大的困难是什么？

    本人文科生,回顾自己近 2 年的Python 自学经历,有一些学习心得和避坑经验分享给大家,让大家在学习 Python 的过程中少走一些弯路!减少遇到不必要的学习困难! 首先,最开始最大的困难应该就是 ...