0x00 distpicker省市县三级联动

在github上下载distpicker，然后将其中的distpicker.js复制到项目文件夹,然后在文件中引入jQuery和该文件即可。

第一种使用:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="distpicker.js"></script>
<body>
<div data-toggle="distpicker"><select></select><select></select><select></select>
</div>
</body>
</html>

第二种使用:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="distpicker.js"></script>
<body>
<div id="distpicker"><select></select><select></select><select></select>
</div>
</body>
<script>
$('#distpicker').distpicker({});
</script>
</html>

如何设置默认值：

方式一:

<div id="distpicker"><select data-province="陕西省"></select><select data-city="西安市"></select><select data-district="长安区"></select>
</div>

方式二:

$('#distpicker').distpicker({province:"陕西省",city:"西安市",district:"长安区"
});

如何获取提交的数据：

添加name即可：

<?php
if(isset($_POST['submit'])){echo "submit";echo $_POST['pro'];echo $_POST['city'];echo $_POST['dis'];// var_dump($_POST);
}
?>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="distpicker.js"></script>
<body>
<form action=<?php echo basename(__FILE__);?> method="post"><div id="distpicker"><select name="pro" ></select><select name="city" ></select><select name="dis"></select></div><input type="submit" name="submit" value="提交">
</form>
</body>
<script>
$('#distpicker').distpicker({province:"陕西省",city:"西安市",district:"长安区"
});
</script>
</html>

后台数据回显：


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="distpicker.js"></script>
<body>
<form action="index.php" method="post"><div id="distpicker"><select name="pro" ></select><select name="city" ></select><select name="dis"></select></div><input type="submit" name="submit" value="提交">
</form>
</body>
<script>$.get('index.php',{},function(data){$('#distpicker').distpicker({province:data.pro,city:data.city,district:data.dis
});
},'json')
</script>
</html>

index.php

<?php$address=["pro"=>"陕西省","city"=>"西安市","dis"=>"长安区"];echo json_encode($address);
?>

0x01 Layer插件

下载地址：http://layer.layui.com/

将layer文件夹复制到项目目录即可

<script src="layer/layer.js"></script>

time:设置多少毫秒后消失

回调函数：当用户点击确认后回自动调用回调函数。

demo:

<script>
layer.alert("是否满18岁?",{icon:1,title:"FBI Warning:",closeBtn:0,anim:4,
},function(){layer.alert("真的满18岁了吗？",{icon:1,title:"FBI Warning:",anim:3},function(){layer.confirm("不要骗我哦",{icon:1,title:"FBI Warning",btn:["人格担保","骗你是狗"]})})
});
</script>

提示框：

layer.tips("注意！！！","#span",{tips:[1,'#3596CC']
});

open框：

Demo:

<script>
layer.open({type:0,title:"FBI Warning",content:"age >= 18???",// area:['400px','200px'],btn:['Yes','No'],btn1:function(){layer.alert("吆西!");},btn2:function(){layer.alert("吆西！！！");},closeBtn:0,shade:0.8
});</script>

tab层:

layer.tab({area: ['600px', '300px'],tab: [{title: 'TAB1', content: '内容1'}, {title: 'TAB2', content: '内容2'}, {title: 'TAB3', content: '内容3'}]
});

0x02 Laydate插件

代码下载:

https://www.layui.com/laydate/

demo:

<script src="laydate/laydate.js"></script>
<body>
<input type="text" class="layui-input" id="test">
</body>
<script>
laydate.render({elem:'#test',type:'datetime',range:true,format:"yyyy/MM/dd",value:"2018/07/24",theme:'molv'
});</script>

jQueryDay04:distpicker省市县三级联动， Layer插件，Laydate插件相关推荐

distpicker省市县三级联动简单使用方法
插件下载地址:http://www.jq22.com/jquery-info8054 引入JS包: <script src="${pageContext.request.context ...
省市县三级联动插件（面向过程，面向对象两种方式实现）
<div class="city_select"><select id="province"><option value=&quo ...
jquery省市县三级联动
Jquery省市县三级联动,数据来源js,无需调用接口可前往本人发布资源<Jquery省市县三级>免积分下载目录效果 html部分 <!DOCTYPE html> < ...
mysql 省市县三级联动查询_省市县三级联动的SQL语句
省市县三级联动的SQL语句无 CREATE TABLE `t_address_province` (`id` INT AUTO_INCREMENT PRIMARY KEY COMMENT '主键', ...
【MySQL】全国省市县三级联动SQL语句—区县SQL(三)
目录 ->区县信息表数据 [MySQL]全国省市县三级联动SQL语句-建表和省份SQL(一)_路遥叶子的博客-CSDN博客全国省市县三级联动SQL语句-建表和省份SQL(一)https://bl ...
mysql 省市县三级联动查询_PHP+AJAX+MYSQL 仿凡客诚品省市县三级联动下拉菜单查询效果...
连接数据库:db.php $dbhost="localhost"; $dbpassword="123"; $dbuser ='root';//数据库用户名 $d ...
JavaScript省市县三级联动-含源代码
目录一.省市县三级联动 1.实现思路 2.实现步骤二.源代码管理 1.HTML显示页面 2.JavaScript核心代码 3.省市县三级地址一.省市县三级联动 1.实现思路 1.创建省市县三级地 ...
php 把省市存入数据库,用JS做了个省市县三级联动效果可存入数据库的值老不对,有代码...
用JS做了个省市县三级联动效果可存入数据库的值老不对,有代码,在线等现在的问题是这样的,当我选好地址后就提交他到数据库中去,可是现在怎么修改提交到数据库中的值都是前面的那些编码,就不是后面的文字.要 ...
JavaScript 省市县三级联动
JavaScript 省市县三级联动 2010-03-16 效果演示省市联动出生地:--请选择省份-- 北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省 ...

jQueryDay04:distpicker省市县三级联动， Layer插件，Laydate插件