jQuery+ajax实现省市区下拉菜单联动（增强版）实现锁定用户所在地并且可以直接选区
2017-03-30 13:17
519 查看
之前做过一个省市区联动的下拉菜单，但是这个功能有一个缺陷，当有一个需求：
1.页面加载的时候锁定用户注册的所在地；
2.可以直接换区，不用等省份发生change时间之后才可以换区（之前版本的功能就只能这样）
直接上代码：
1.页面加载的时候锁定用户注册的所在地；
2.可以直接换区，不用等省份发生change时间之后才可以换区（之前版本的功能就只能这样）
直接上代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>门店管理后台</title>
<link rel="stylesheet" type="text/css" href="static/css/reset.css">
<link rel="stylesheet" type="text/css" href="static/css/commend.css">
<link rel="stylesheet" type="text/css" href="static/css/search.css">
<link rel="stylesheet" type="text/css" href="static/css/paging.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="static/js/echarts.js" type="text/javascript" ></script>
<!-- <script src="static/js/city2.js"></script> -->
<script type="text/javascript" src="static/js/citySelect2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
getCityInfo();
getProvince();
//省市区ajax请求
function getProvince() {
$.ajax({
type : "post",
async : true,
url : "get_all_prov",
success : function(data) {
var data = eval('(' + data + ')');
addProvinceName(data.root);
changeCity();
},
});
}
$("#prov4").change(function() {
changeCity();
});
/* $("#city4").mouseenter(function() {
changeCity();
});
$("#area4").mouseenter(function() {
changeMarket();
}); */
function addProvinceName(data) {
$.each(data, function(v, o) {
var s = "<option value="+o.cityId+">" + o.cityName
+ "</option>";
$(s).appendTo($("#prov4"));
});
}
function changeMarket() {
var pId = $("#city4").val();
var areaId = $("#area4").val(); //当前用户所在的区号
//alert(pId);
$("#area4").empty();
$.post("menu_list_city_area", {
"shengOrShi" : pId
}, function(data) {
var data = eval('(' + data + ')');
for (var i = 0; i < data.root.length; i++) {
if(data.root[i].cityId == areaId){
$("#area4").prepend("<option value='"+data.root[i].cityId+"'>"+ data.root[i].cityName+ "</option> "); //获取当前用户所在区并显示在select第一个option中
}else{
$("<option value='"+data.root[i].cityId+"'>"+ data.root[i].cityName+ "</option> ").appendTo($("#area4"));
}
}
$("#area4 option:first").prop("selected", 'selected'); //设置强制显示第一个option
});
}
$("#city4").change(function() {
changeMarket();
})
function changeCity() {
var pId = $("#prov4").val();
$("#city4").empty();
$.post("menu_list_city_area", {
"shengOrShi" : pId
}, function(data) {
var data = eval('(' + data + ')');
for (var i = 0; i < data.root.length; i++) {
$(
"<option value='"+data.root[i].cityId+"'>"
+ data.root[i].cityName
+ "</option> ").appendTo(
$("#city4"))
}
changeMarket();
});
}
getProjectInfo();
});
function getProjectInfo() { //获取用户注册时选定的省市区
$.ajax({
type : "post",
async : false,
url : "findProjectHouse",
data : {
sheng : $('#prov4').val(),
shi : $('#city4').val(),
qu : $('#area4').val(),
projectName : $('#projectName').val(),
isYouhui : $("input[name='isYouhui']:checked").val(), //这两个不管他，其他功能
isDaiKan : $("input[name='isDaiKan']:checked").val()
},
success : function(data) {
data = eval("(" + data + ")");
getFindProjectHouse(data.root);
}
});
}
function getCityInfo() {
$.ajax({
type : "post",
async : false,
url : "get_city_name_by_parent_id",
success : function(data) {
var s1 = "<option value="+data.provId+">" + data.provName
+ "</option>";
var s2 = "<option value="+data.cityId+">" + data.cityName
+ "</option>";
var s3 = "<option value="+data.areaId+">" + data.areaName
+ "</option>";
$(s1).appendTo($("#prov4"));
$(s2).appendTo($("#city4"));
$(s3).appendTo($("#area4"));
}
});
}
function getFindProjectHouse(data) {
var s = '<tr><th>案场名称</th><th>开发商</th><th>均价</th><th>支持带看</th>';
s += '<th>支持异地</th><th>快速结佣</th><th>带看佣金</th><th>分销佣金</th><th>优惠信息</th><th>操作</th></tr>';
$.each(data, function(v, o) {
s += '<tr><td>' + o.projectName + '</td><td>' + o.developer
+ '</td><td>' + o.averagePrice + '</td>';
if (o.isDaiKan == 0) {
s += '<td>否</td>';
} else if (o.isDaiKan == 1) {
s += '<td>是</td>';
} else if (o.isDaiKan == null) {
s += '<td></td>';
}
if (o.isYiDi == 0) {
s += '<td>否</td>';
} else if (o.isYiDi == 1) {
s += '<td>是</td>';
} else if (o.isYiDi == null) {
s += '<td></td>';
}
if (o.isFast == 0) {
s += '<td>否</td>';
} else if (o.isFast == 1) {
s += '<td>是</td>';
} else if (o.isFast == null) {
s += '<td></td>';
}
s += '<td>' + o.daiKanMoney + '</td><td>' + o.fenXiaoMoney
+ '</td><td>' + o.information + '</td>';
s += '<td><a href="zhongjieHouseList?projectId=' + o.projectId
+ '">可售房源</a></td></tr>';
});
if (data.length > 0) {
$('#pInfo').html(s);
} else {
$("#pInfo")
.html(
"<br/><span style='width:10%;height:30px;display:block;margin:0 auto;'>暂无数据</span>");
}
}
function getSearchProject() {
getProjectInfo();
}
function empty(){
if($("#houseNum").val()==""){
alert("请输入搜索条件");
return false;
}
}
</script>
</head>
<body>
<!-- <header id="" class="index-header">
<nav>
<ul>
<li><a href="index.html" title="" class="index-logo">中介门店管理后台</a></li>
<li><a href="index.html" title="">首页</a></li>
<li><a class="active" href="" title="">房源搜索</a></li>
<li><a href="" title="">经纪人管理</a></li>
<li><a href="" title="">客户管理</a></li>
<li><a href="" title="">对账单</a></li>
<li><a href="" title="">业务</a></li>
<li><a href="" title="">欢迎您：<span>User</span></a></li>
</ul>
</nav>
</header>/header -->
<%@include file="../publicpage/shoppublicpage.jsp" %>
<div class="contain">
<nav>
<ul class="lead-nav">
<li><a href="to_store_index" title="">首页</a></li>
<li><span>—</span></li>
<li><a href="###" title="">房源搜索</a></li>
</ul>
</nav>
<div class="btn-group">
<!-- 案场搜索 -->
<form action="" method="post" id="myForm">
<!-- 市区联动 -->
<div id="city_4">
<select name="sheng" class="prov" id="prov4" style="height:20px;width:70px">
</select>
<select name="shi" class="city" id="city4" style="height:20px;width:70px">
</select>
<select name="qu" class="dist" id="area4" style="height:20px;width:70px">
</select>
</div>
<input id="projectName" name="projectName" class="btn-text btn-text-1" placeholder="输入案场名称"></input>
<button class="btn-search" type="button" onclick="getSearchProject()">搜索案场</button>
<input name="isYouhui" type="checkbox" checked="checked" id="youhui">优惠案场</input>
<input name="isDaiKan" type="checkbox" checked="checked" id="daikan">支持带看</input>
</form>
<form action="oneHouse" target="_blank" method="post" onsubmit="return empty()">
<input name="houseNum" class="btn-text btn-text-2" placeholder="请输入APP上查看到的房源ID" id="houseNum"></input>
<button class="btn-search" type="submit" >搜索房源</button>
</form>
</div>
<table class="message" id="pInfo">
</table>
</div>
<script type="text/javascript" src="static/js/jquery-1.11.2.js"></script>
<script type="text/javascript" src="static/js/query.js"></script>
<script>
// 市区二级联动
/* var selectVal = new CitySelect({
data : data,
provId : "#prov4",
cityId : '#city4',
areaId : '#area4'
}); */
// var selectVa2 = new CitySelect({
// data : data,
// provId : "#prov5",
// cityId : '#city5',
// areaId : '#area5',
// isSelect: false
// });
// 分页功能
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- dhl：ASP.NET MVC + Jquery实现Ajax下拉框数据2或3级联动（+用户控件）
- jquery+ajax实现省市区三级联动 （封装和不封装两种方式）
- jquery实现ajax下拉菜单联动
- 利用php+jQuery+ajax实现汽车车型四级联动下拉菜单
- 使用Ajax+jQuery实现省市区三级联动
- 用户管理的设计_jquery的ajax实现二级联动效果
- 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
- jquery+ajax实现省市区三级联动效果简单示例
- AJAX省市区三级联动下拉菜单(java版)
- Jquery+Ajax+XML实现国家、省、市的三级联动
- asp.net mvc jquery+js+ajax 实现联动
- 谁能用jQuery和Ajax做的访问ado.net程序-----跪求各位大侠（有相似的也可以，只要实现的是类似的功能就可以）
- jquery 实现的省市区级联,无ajax
- Jquery+Ajax+XML实现国家、省、市的三级联动
- 2.如何让一个项目的用户目前只能是姓名登录，优化为增加一个字段为姓名和用户名同时都可以实现登录 ，并且用户名不能使中文?
- asp.net 使用jquery 和ajax 实现三级联动
- jquery的ajax实现二级联动
- 用ajax、JSP和Servlet实现多级下拉菜单无刷新联动
- Ajax+mybaits实现省市区三级联动
- jQuery基于ajax实现页面加载后检查用户登录状态的方法