已选择实现省市区三级联动

本文实例为大家分享了挑选出来的实现省市区三级联动的具体代码，供大家参考，具体内容如下

效果图：

一、资源

1.1、css资源

链接href='././CSS/插件/选择/选择。CSS ' rel='样式表1.2、js资源

脚本src='http:/./js/插件/选择/选择。jquery。js /脚本二、代码

div class=' row ' div class=' form-group col-sm-2 ' div class=' input-group ' select data-placeholder='选择省份.'id='省份类='省份-选择-选择tabindex='1 '选项值=' '请选择省份/option # if外省列表？省列表？尺寸gt 0 #列出省份列表作为省份选项值=' $ {省份。provinceId！} ' $ {省份。名称！}/option/# list/# if/select/div/div class=' form-group col-sm-2 ' style=' margin-left : 36px；'div class='输入组'选择数据-占位符='选择城市.'id=' city ' class=' city-choose-select ' tabindex=' 2 '选项值=' '请选择城市/option/select/div/div class=' form-group col-sm-2 ' style=' margin-left : 36px；'div class='输入组'选择数据-占位符='选择区县.'class=' area-choosed-select ' id=' area ' tabindex=' 3 '选项值=' '请选择区县/选项/选择/div /div/div三、javascript代码

脚本类型=' text/JavaScript ' $(function(){ $(').省-选择-选择')。所选({ disable _ search _ threshold : 10，no_results_text: '没有找到',//没有搜索到匹配项时显示的文字width: '240px '，disable_search:false，//设置为真实的隐藏单选框的搜索框禁用_搜索_阈值：0//少于n项时隐藏搜索框});$('.城市选择-选择')。所选({ disable _ search _ threshold : 10，no_results_text: '没有找到',//没有搜索到匹配项时显示的文字width: '240px '，disable_search:false，//设置为真实的隐藏单选框的搜索框禁用_搜索_阈值：0//少于n项时隐藏搜索框});$('.区域选择-选择')。所选({ disable _ search _ threshold : 10，no_results_text: '没有找到',//没有搜索到匹配项时显示的文字width: '240px '，disable_search:false，//设置为真实的隐藏单选框的搜索框禁用_搜索_阈值：0//少于n项时隐藏搜索框});})//选中触发标准的变化事件，同时会传递选中或取消选中参数，方便用户获取改变的选项$('.省-选择-选择')。on('change '，function(e，params){ findcitiesbyvehicle(e，params)；});$('.城市选择-选择')。on('change '，function(e，params){ findaraybycity(e，params)；});函数findcitiesbyvehicle(e，params){ var ProvinCeid=params。选中；$.post('/common/find _ city _ by _省份，{ 'provinceId':provinceId }，函数（数据){ $(' #城市选项： first ').nextAll().移除();$(' #区域选项：优先').nextAll().移除();var html=for(var I=0；一。数据。长度；I){ html=' option value=' data[I].城市id " "有subinfo="true "数据[i].name/“option”} $(“# city”).追加(html)；//通过射流研究…改变挑选元素选项时应该触发此事件，以更新挑选出来的生成的选框$('.城市选择-选择')。触发器(“已选择：更新”)；$('.区域选择-选择')。触发器(“已选择：更新”)；})}函数findaraybycity(e，params){ var city id=params。选中；$.post('/common/find _ ares _ by _ city '，{ 'cityId':cityId }，函数（数据){ $(' #区域选项：优先').nextAll().移除();var html=for(var I=0；一。数据。长度；I){ html=' option value=' data[I].区域id " "具有subinfo="true "数据[i].name/“option”} $(“# area”).追加(html)；//通过射流研究…改变挑选元素选项时应该触发此事件，以更新挑选出来的生成的选框$('.区域选择-选择')。触发器(“已选择：更新”)；}) }函数submitBtn() { $('#result_div ').html(" ")；var provinceId=$('#province ').val()；var外省名称=$(' #省份选项：当选').text()；var cityId=$('#city ').val()；var城市名称=$(' #城市选项：选中').text()；var Areid=$(' # area ').val()；var Arename=$(' #选择的区域选项： ').text()；$('#result_div ').追加(' provinceId=' provinceId 'br ').追加(' provinceName=' provinceName 'br ').追加(' cityId=' cityId 'br ').追加(' cityName=' cityName 'br ').追加(' areaId=' areaId ' br ').追加(' Arename=' Arename ' br ')；}/脚本四、java代码

/* * * * @ title : find city by省份* @Description:根据省份获取城市列表* @author:大都督* @ param Provincid * @ return * @ return : messageInfo */@请求映射('/find _ cities _ by _省份)@回应正文公共列表城市查找城市依据省份(字符串ProvinSid){ assert。hastext(Provincid，字符串文本。provincid _ must)；返回市道。findbyProvincid(Provincid)；}/* * * * @ title :按城市查找区域* @ description :根据城市获取区县列表* @author:大都督* @ param city id * @ return * @ return : list city */@请求映射('/find _ areas _ by _ city ')@响应正文公共列表区域按城市查找区域(字符串cityId) { Assert.hasText(cityId，stringtext。城市id _ must)；返回阿瑞道。findbycity(城市id)；}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。