实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动菜单</title>
</head>
<body>
省 <select name="" id="pro"></select>
市 <select name="" id="city"></select>
区 <select name="" id="area"></select>
<p id="addr">
<span id="addrp"></span>
<span id="addrc"></span>
<span id="addra"></span>
</p>
<script src="../lib/jquery.js"></script>
<script>
$(function () {
$.getJSON('1.json',function (data) {
let option = '<option value="">选择省</option>';
$.each(data,function (i) {
option += '<option value="'+data[i].proId+'">'+data[i].proName+'</option>'
});
$('#pro').html(option);
});
$('#pro').change(function () {
if ($(this).find(':selected').text() != '选择省') {
$('#addrp').html($(this).find(':selected').text());
}else {
$('#addrp').html('');
$('#addrc').html('');
$('#addra').html('');
}
$.getJSON('2.json',function (data) {
let option = '<option value="">选择市</option>';
$.each(data,function (i) {
if(data[i].proId == $('#pro').val()){
option += '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>'
}
});
$('#city').html(option);
});
});
$('#city').change(function () {
if ($(this).find(':selected').text() != '选择市') {
$('#addrc').html($(this).find(':selected').text());
}else {
$('#addrc').html('');
$('#addra').html('');
}
$.getJSON('3.json',function (data) {
let option = '<option value="">选择区</option>';
$.each(data,function (i) {
if(data[i].cityId == $('#city').val()){
option += '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>'
}
});
$('#area').html(option);
});
});
$('#area').change(function(){
//查看当前选择中元素内容
if ($(this).find(':selected').text() != '选择区') {
$('#addra').html($(this).find(':selected').text());
}else {
$('#addra').html('');
}
});
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style>
div{
margin: 100px auto;
width: 500px;
height: 200px;
border: black 1px solid;
border-radius: 15px;
background: #ebebeb;
}
h3{
text-align: center;
}
p{
margin: 15px 15px;
}
button{
width: 100px;
height: 30px;
border: none;
border-radius: 10px;
background: #1ebeff;
font-size: 1rem;
}
button:hover{
background: #ffa453;
}
</style>
</head>
<body>
<div>
<h3>用户注册</h3>
<p><label for="email">邮箱:</label><input type="email" id="email" name="email"></p>
<p><label for="password">密码:</label><input type="password" id="password" name="password"></p>
<p><button>注册</button></p>
</div>
<script src="../lib/jquery.js"></script>
<script>
$('button').click(function(){
if ($('#email').val().length === 0) {
$('#email').after('<span style="color:red">请输入邮箱或者手机号</span>').next().fadeOut(2000);
$('#email').focus();
return false;
}
if (isNaN($('#email').val()) == false) {
if ($('#email').val().length != 11){
$('#email').after('<span style="color:red">请输入正确的手机或邮箱</span>').next().fadeOut(2000);
return false;
}else {
let filter = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9-])+((\.[a-zA-Z0-9-]{2,3}){1,2})$/;
if (filter.test($('#email').val()) == false) $('#email').after('<span style="color:red">邮箱格式不正确</span>').next().fadeOut(2000);
return false;
}
}
if ($('#password').val().length === 0) {
$('#password').after('<span style="color:red">密码不能为空</span>').next().fadeOut(2000);
$('#password').focus();
return false;
}else if($('#password').val().length < 6) {
$('#password').after('<span style="color:red">密码不能少于6位</span>').next().fadeOut(2000);
$('#password').focus();
return false;
}
$.post(
'check.php',
//发送数据到服务器
{
email:$('#email').val(),
password:$('#password').val()
},
// 请求成功的回调
function(data,status,xhr) {
// console.log(data,status,xhr); // 查看返回的数据
// 实际开发过程中,大多只用到data,status和xhr极少使用,另外,data和status也可用xhr对象获取
// console.log($(this));
// console.log(data.message);
if (data.status === 1) {
$('button') // 选择当前按钮
.after('<span style="color: red"></span>') // 在按钮后添加一个<span>用来显示提示信息
.next() // 切换到button的下一个兄弟元素,这时就是刚刚添加的<span>
.html(data.message) // 设置<span>中的文本内容
.fadeOut(2000); // 将<span>的内容2秒后淡出
}else if (data.status === 2) {
$('button') // 选择当前按钮
.after('<span style="color: red"></span>') // 在按钮后添加一个<span>用来显示提示信息
.next() // 切换到button的下一个兄弟元素,这时就是刚刚添加的<span>
.html(data.message) // 设置<span>中的文本内容
.fadeOut(2000); // 将<span>的内容2秒后淡出
} else {
$('button')
.after('<span style="color: green"></span>')
.next()
.html(data.message)
.fadeOut(2000);
}
},
'json' // 返回的数据类型
)
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
