当前位置： 首页 > news >正文

青岛电商网站建设seo优化关键词分类

news 2025/7/18 9:48:06
青岛电商网站建设,seo优化关键词分类,东莞黄页企业名录,好看的页面图片1.实现省市县地址三级联动，页面效果如下： 2.业务要求介绍：在该业务中，增加和修改页面有省市县三个下拉框，三个下拉框需有联动功能，且选完之后，不仅得到省市县的编码，而且也能得到相对…

1.实现省市县地址三级联动，页面效果如下：

2.业务要求介绍：在该业务中，增加和修改页面有省市县三个下拉框，三个下拉框需有联动功能，且选完之后，不仅得到省市县的编码，而且也能得到相对应的省市县名称，最后提交一起保存到数据库中。

3.增加页面的代码如下：

a.省市县三个下拉框增加页面标签代码如下：

<div class="form-group">    <!-- <label class="col-sm-3 control-label">省份编码：</label> --><label class="col-sm-3 control-label">省份名称：</label><div class="col-sm-8"><select id="province" class="form-control m-b" name="belongAreaCode"><option value="0">--请选择省份--</option></select></div>
</div>
<div class="form-group" hidden>    <label class="col-sm-3 control-label">省份名称：</label><div class="col-sm-8"><input name="belongAreaName" id="belongAreaName" class="form-control" type="text"></div>
</div>
<div class="form-group">    <!-- <label class="col-sm-3 control-label">城市编码：</label> --><label class="col-sm-3 control-label">城市名称：</label><div class="col-sm-8"><select  id="city" class="form-control m-b" name="ivtStr1"><option value="0">--请选择市区--</option></select></div>
</div>
<div class="form-group" hidden>    <label class="col-sm-3 control-label">城市名称：</label><div class="col-sm-8"><input name="ivtStr2" id="ivtStr2" class="form-control" type="text"></div>
</div>
<div class="form-group">    <!-- <label class="col-sm-3 control-label">区县编码：</label> --><label class="col-sm-3 control-label">区县名称：</label><div class="col-sm-8"><select id="area" class="form-control m-b" name="ivtStr3"><option value="0">--请选择县城--</option></select></div>
</div>
<div class="form-group" hidden>    <label class="col-sm-3 control-label">区县名称：</label><div class="col-sm-8"><input name="ivtStr4" id="ivtStr4" class="form-control" type="text"></div>
</div>

b.增加页面实现下拉数据显示和三级联动效果JS中的代码如下：

<script type="text/javascript">var start_provinceId = "";var start_cityId = "";var start_countyId = "";//页面一加载调取后台查询全部省份的方法$.ajax({url:ctx + "area/area/selectSuitedAdrress",type:"post",dataType:"json",data:{"provinceId": start_provinceId,"cityId": start_cityId,"countyId": start_countyId},success:function(data){$(data.provinceNameList).each(function(a,b){$("#province").append("<option value='"+b.provinceId+"'>"+b.provinceName+"</option>");}); },error:function(){}});//选择省份，保存省份编码和对应名称，以及联动市级下拉框数据$("#province").change(function(){var p_provinceId = "";var p_cityId = "";var p_countyId = "";$("#city").empty();$("#area").empty();var a = $("#province option:selected").text();$("#belongAreaName").val(a);var p_provinceId = $("#province").val();$("#city").append("<option value='0'>--请选择市区--</option>");$("#area").append("<option value='0'>--请选择县城--</option>");$.ajax({url:ctx + "area/area/selectSuitedAdrress",type:"post",dataType:"json",data:{"provinceId": p_provinceId,"cityId": p_cityId,"countyId": p_countyId},success:function(data){$(data).each(function(a,b){$("#city").append("<option value='"+b.cityId+"'>"+b.cityName+"</option>");});},error:function(){}});});//选择城市，保存城市编码和对应名称，以及联动县级下拉框数据$("#city").change(function(){var c_provinceId = "";var c_cityId = "";var c_countyId = "";$("#area").empty();var c_cityId = $("#city").val();var a = $("#city option:selected").text();$("#ivtStr2").val(a);$("#area").append("<option value='0'>--请选择县城--</option>");$.ajax({url:ctx + "area/area/selectSuitedAdrress",type:"post",dataType:"json",data:{"provinceId": c_provinceId,"cityId": c_cityId,"countyId": c_countyId},success:function(data){$(data).each(function(a,b){$("#area").append("<option value='"+b.countyId+"'>"+b.countyName+"</option>");});},error:function(){}}); });//选择区县，保存区县编码和对应名称$("#area").change(function(){$("#town").empty();var a = $("#area option:selected").text();$("#ivtStr4").val(a);	});
</script>

4.修改页面的代码如下：

a.省市县三个下拉框修改页面标签代码如下：

<div class="form-group">    <!--  <label class="col-sm-3 control-label">省份编码：</label> --><label class="col-sm-3 control-label">省份名称：</label><div class="col-sm-8"><select id="province" class="form-control m-b" name="belongAreaCode" ><option value="0">--请选择省份--</option></select></div>
</div>
<div class="form-group" hidden>    <label class="col-sm-3 control-label">省份名称：</label><div class="col-sm-8"><input name="belongAreaName" id="belongAreaName" th:field="*{belongAreaName}" class="form-control" type="text"></div>
</div> 
<div class="form-group">    <!-- <label class="col-sm-3 control-label">城市编码：</label> --><label class="col-sm-3 control-label">城市名称：</label><div class="col-sm-8"><select  id="city" class="form-control m-b" name="ivtStr1"><option value="0">--请选择市区--</option></select></div>
</div>
<div class="form-group" hidden>    <label class="col-sm-3 control-label">城市名称：</label><div class="col-sm-8"><input name="ivtStr2" id="ivtStr2" th:field="*{ivtStr2}" class="form-control" type="text"></div>
</div>
<div class="form-group">    <!-- <label class="col-sm-3 control-label">区县编码：</label> --><label class="col-sm-3 control-label">区县名称：</label><div class="col-sm-8"><select id="area" class="form-control m-b" name="ivtStr3"><option value="0">--请选择县城--</option></select></div>
</div>
<div class="form-group" hidden>    <label class="col-sm-3 control-label">区县名称：</label><div class="col-sm-8"><input name="ivtStr4" id="ivtStr4" th:field="*{ivtStr4}" class="form-control" type="text"></div>
</div>

b.修改页面实现下拉数据显示和三级联动效果JS中的代码如下：

<script type="text/javascript">var start_provinceId = "";var start_cityId = "";var start_countyId = "";//页面一加载查询后台数据，与数据库原先省市县保存的数据进行匹配，并显示三个在下拉框中$.ajax({url:ctx + "area/area/selectSuitedAdrress",type:"post",dataType:"json",data:{"provinceId": start_provinceId,"cityId": start_cityId,"countyId": start_countyId},success:function(data){//获取当前修改页面省份名称var shenCode = $("#belongAreaName").val(); //遍历所有省份集合$(data.provinceNameList).each(function(a,b){//把遍历的省份名称与当前进行匹配if(b.provinceName == shenCode){//加入标签操作$("#province").append("<option value='"+b.provinceId+"' selected>"+b.provinceName+"</option>");//省份匹配成功后，以当前省份id作为条件，调取后台查询该省份下所有城市的方法$.ajax({url:ctx + "area/area/selectSuitedAdrress",type:"post",dataType:"json",data:{"provinceId": b.provinceId,"cityId": "","countyId": ""},success:function(data){//获取当前修改页面城市名称var shiCode = $("#ivtStr2").val(); //遍历所有该省份下城市集合$(data).each(function(a,b){//把遍历的城市名称与当前页面城市匹配if(b.cityName == shiCode){//加入标签操作$("#city").append("<option value='"+b.cityId+"' selected>"+b.cityName+"</option>");//城市匹配成功后，以当前城市id作为条件，调取后台查询该城市下所有区县的方法$.ajax({url:ctx + "area/area/selectSuitedAdrress",type:"post",dataType:"json",data:{"provinceId": "","cityId": b.cityId,"countyId": ""},success:function(data){//获取当前修改页面区县名称var xianCode = $("#ivtStr4").val();//遍历所有该城市下区县集合$(data).each(function(a,b){//把遍历的区县名称与当前页面获取区县进行匹配if(b.countyName == xianCode){//加入标签操作$("#area").append("<option value='"+b.countyId+"' selected>"+b.countyName+"</option>");}else{//加入标签操作（未匹配上当前区县）$("#area").append("<option value='"+b.countyId+"'>"+b.countyName+"</option>");}});},error:function(){}}); }else{//加入标签操作（未匹配上当前城市）$("#city").append("<option value='"+b.cityId+"'>"+b.cityName+"</option>");}});},error:function(){}});}else{//加入标签操作（未匹配上当前省份）$("#province").append("<option value='"+b.provinceId+"'>"+b.provinceName+"</option>");}}); },error:function(){}});//选择省份，保存省份编码和对应名称，以及联动市级下拉框数据$("#province").change(function(){var p_provinceId = "";var p_cityId = "";var p_countyId = "";$("#city").empty();$("#area").empty();var a = $("#province option:selected").text();$("#belongAreaName").val(a);var p_provinceId = $("#province").val();$("#city").append("<option value='0'>--请选择市区--</option>");$("#area").append("<option value='0'>--请选择县城--</option>");$.ajax({url:ctx + "area/area/selectSuitedAdrress",type:"post",dataType:"json",data:{"provinceId": p_provinceId,"cityId": p_cityId,"countyId": p_countyId},success:function(data){$(data).each(function(a,b){$("#city").append("<option value='"+b.cityId+"'>"+b.cityName+"</option>");});},error:function(){}});});//选择城市，保存城市编码和对应名称，以及联动县级下拉框数据$("#city").change(function(){var c_provinceId = "";var c_cityId = "";var c_countyId = "";$("#area").empty();var c_cityId = $("#city").val();var a = $("#city option:selected").text();$("#ivtStr2").val(a);$("#area").append("<option value='0'>--请选择县城--</option>");$.ajax({url:ctx + "area/area/selectSuitedAdrress",type:"post",dataType:"json",data:{"provinceId": c_provinceId,"cityId": c_cityId,"countyId": c_countyId},success:function(data){$(data).each(function(a,b){$("#area").append("<option value='"+b.countyId+"'>"+b.countyName+"</option>");});},error:function(){}}); });//选择区县，保存区县编码和对应名称$("#area").change(function(){$("#town").empty();var a = $("#area option:selected").text();$("#ivtStr4").val(a);});
</script>

5.提示如下：

a.代码中调取方法都是同一个方法，因为我在后台全部写成了一个方法，可以根据传参的有无得到不同的数据集合的。

b.此次用的省市县的地址资源是存于一张表中，直接调取后台方法进行查询的。

http://www.lbrq.cn/news/2365471.html

相关文章：

  • 汽车网站建设页面培训seo哪家学校好
  • 个人怎么样做网站站长工具关键词查询
  • 做网站打电话话术江西省水文监测中心
  • 曹县住房和城乡建设局网站友情链接检索数据分析
  • 深圳地产网站制作公司最新网络推广平台
  • 烟台主流网站东莞互联网公司排名
  • WordPress分段插件沈阳seo网站关键词优化
  • 七宝网站建设crm
  • 哈尔滨阿城网站建设seo是指
  • 宜昌网站建设哪家好怎么制作一个网站5个网页
  • 深圳楼市最新消息西安seo按天收费
  • 网站建设也笔试如何让新网站被收录
  • 帝国网站建设业务推广公司
  • 网站建设模型软件谷歌seo 优化
  • 凌风wordpress视频哈尔滨优化网站方法
  • 济南定制网站建设seo搜索引擎招聘
  • 广东东莞疫情最新消息通知广州网站优化服务商
  • 挂马网站教程seo的搜索排名影响因素有哪些
  • 武汉衍艺 网站建设在百度上打广告找谁
  • 系统优化的方法哲学seo1新地址在哪里
  • 企业电商网站优化重庆seo网站运营
  • 淘淘乐网站建设正安县网站seo优化排名
  • 网站建设公司做网站要多少费用企业网站建设需求分析
  • 手机端企业网站模板百度小说搜索风云排行榜
  • 被邀请做刷客会不会碰到钓鱼网站网络公司推广方案
  • 网站菜单分类怎么做的网站推广优化方法
  • 诚聘网站开发人员中国十大搜索引擎排名
  • wordpress非官方沈阳seo团队
  • 菏泽seo网站seo资讯
  • 四川监理协会建设网站网络销售挣钱吗
  • 虚拟化测试工具Parasoft Virtualize如何为汽车企业提供仿真测试？
  • 数据结构：集合操作（Set Operations）： 并集（Union）、交集（Intersection）、 差集（Difference）
  • 《工程伦理》分析报告五 软件开发
  • 分布式系统高可用性设计 - 监控与日志系统
  • 横向移动(下)
  • Sketch 与 Figma