省市区三级联动数据库取数据js代码

//页面部分代码

<div class="mui-input-row">
<label class="txt2">丢失地点</label>

<input type="hidden" id="liveProvinceBaseName" name=" ">
<select class="mui-inline mui-select" id="province" name=" " >
<option>省</option>
</select>
</div>
<div class="mui-input-row">
<label style="display: none;">Input</label>

<input type="hidden" id="liveCityBaseName" name=" ">
<select class="mui-inline mui-select" id="city" name=" ">
<option>市</option>
</select>
</div>
<div class="mui-input-row">
<label style="display: none;">Input</label>

<input type="hidden" id="liveDowntownBaseName" name=" ">
<select class="mui-inline mui-select" id="county" name=" ">
<option>区/县</option>
</select>
</div>

//js代码

$(document).ready(function(){

$.ajax({
type: "post",
dataType: "json",
url: " ",
success: function(data){

var result = "<option>选择省份</option>"
$.each(data, function(i, item) {
result +="<option value='"+item.proId+"'>"+item.proName+"</option>";
});
$("#province").html('');
$("#province").append(result);
}
});

$("#province").change(function () {
var selectedIndex = document.getElementById("province").selectedIndex;
$("#liveProvinceBaseName").val(document.getElementById("province").options[selectedIndex].text);
$.ajax({
type: "post",
dataType: "json",
url: " ",
data: {provinceid:$("#province").val()},
success: function(data){

var result = "<option>选择城市</option>"
$.each(data, function(i, item) {
result +="<option value='"+item.cityId+"'>"+item.cityName+"</option>";
});
$("#city").html(' ');
$("#city").append(result);

var result1 = "<option>选择区域</option>";
$("#county").html(' ');
$("#county").append(result1);
}
});
});


$("#city").change(function () {
var selectedIndex = document.getElementById("city").selectedIndex;
$("#liveCityBaseName").val(document.getElementById("city").options[selectedIndex].text);

$.ajax({
type: "get",
dataType:"json",
url: " ",
data: {cityid:$("#city").val()},
success: function(data){

var result = "<option>选择区域</option>";
$.each(data, function(i, item) {
result +="<option value='"+item.dtId+"'>"+item.downtownName+"</option>";
});
$("#county").html('');
$("#county").append(result);
}
});
});

$("#county").change(function () {
var selectedIndex = document.getElementById("county").selectedIndex;
$("#liveDowntownBaseName").val(document.getElementById("county").options[selectedIndex].text);
});

});

省市区三级联动数据库取数据js代码相关推荐

WheelView实现省市区三级联动(数据库实现版本号附带完整SQL及数据)
近期在实现收货地址功能.用到了省市区三级联动效果.网上找到一般都是xml或json,数据源陈旧改动麻烦,改动了一下使用数据库方式实现了一下数据源解决,因为数据量比較大通过初始化批量运行SQL的方式不 ...
JQuery+ajax实现省市区三级联动（附：补充代码内容）
省市区三级联动的实现(附:补充代码) 有了下面的代码,别忘了导入需要的jar包,用到的jar包到网上都能找到. 如果觉得不错,就点个赞!谢谢观望!! ## 1.效果图 ## 2.jsp页面,nov ...
mysql 省市区三级联动_javaweb--json--ajax--mysql实现省市区三级联动（附三级联动数据库）...
在web中,实现三级联动很常见,尤其是利用jquery+json.但是从根本上来说jquery并不是最能让人容易理解的,接下来从最基本的javascript开始,实现由javascript+json+ ...
一款超好的省市区三级联动插件citypicher的使用（数据分从数据库获取或从js文件获取）
有兴趣的小伙伴,可以继续阅读小编下一篇博客微服务概述添加链接描述一篇对SpringCloud的介绍添加链接描述 SpringCloud核心组件详述添加链接描述一篇对MySQL语句执行顺序的介绍添 ...
支付宝实现省市区三级联动my.multiLevelSelect（附带省市区js数据）
应用场景可以供用户选择所在位置.喜好位置.可用于根据用户所选位置给用户提供该位置的特色美食,附近的电影院,周边环境等. 效果图展示视频支付宝省市区三级联动图片代码实现点击按钮button, ...
【转】纯JS省市区三级联动（行政区划代码更新至2015-9-30）
本文代码实现的功能是省市区三级联动下拉列表,纯Javascript,网上已有很多这方面的代码.但是作为一个新手,这是我的第一篇CSDN博客,发此文的目的主要是学习交流,希望看到的朋友发现有什么不对的地 ...
纯JS省市区三级联动（行政区划代码更新至2015-9-30）
本文代码实现的功能是省市区三级联动下拉列表,纯Javascript,网上已有很多这方面的代码.但是作为一个新手,这是我的第一篇CSDN博客,发此文的目的主要是学习交流,希望看到的朋友发现有什么不对的地 ...
纯js实现省市区三级联动
纯js实现省市区三级联动话不多说,直接上整篇代码 <!DOCTYPE html> <html lang="en"> <head><met ...
2018最新版省市区三级联动下拉框+所有源代码以及数据库
2018年国家统计局最新数据,JSP+Servlet+Dao实现省市区三级联动下拉框的效果 DropdownDAO.java -–Dao层 package com;import java.sql.Co ...

省市区三级联动数据库取数据js代码

省市区三级联动数据库取数据js代码相关推荐

最新文章

热门文章

省市区三级联动 数据库取数据js代码

省市区三级联动 数据库取数据js代码相关推荐

最新文章

热门文章

省市区三级联动数据库取数据js代码

省市区三级联动数据库取数据js代码相关推荐