xml java省市县三级联动_jquery读取xml文件实现省市县三级联动的方法

Myth丶恋晨 2022-11-02 16:20 207阅读 0赞

本文实例讲述了jquery读取xml文件实现省市县三级联动的方法。分享给大家供大家参考。具体如下：

页面代码如下：

My JSP 'city.jsp' starting page

$(document).ready(function()\{

//省

$.ajax(\{url:"xml/City.xml",

success:function(xml)\{

$(xml).find("province").each(function()\{

var t = $(this).attr("name");//this->

$("\#DropProvince").append(""+t+"");

\});

\}

\});

//市

$("\#DropProvince").change(function()\{

$("\#sCity>option").remove();

$("\#sArea>option").remove();

var pname = $("\#DropProvince").val();

$.ajax(\{url:"xml/City.xml",

success:function(xml)\{

///查找下的所有第一级子元素(即城市)

$(xml).find("province\[name='"+pname+"'\]>city").each(function()\{

var city = $(this).attr("name");//this->

$("\#sCity").append(""+city+"");

\});

///查找下的所有第一级子元素(即区域)

var cname = $("\#sCity").val();

$(xml).find("city\[name='"+cname+"'\]>area").each(function()\{

var area = $(this).attr("name");//this->

$("\#sArea").append(""+area+"");

\});

\}

\});

\});

//区

$("\#sCity").change(function()\{

$("\#sArea>option").remove();

var cname = $("\#sCity").val();

$.ajax(\{url:"xml/City.xml",

success:function(xml)\{

///查找下的所有第一级子元素(即区域)

$(xml).find("city\[name='"+cname+"'\]>area").each(function()\{

var area = $(this).attr("name");//this->

$("\#sArea").append(""+area+"");

\});

\}

\});

\});

\});

请选择

请选择相应市

请选择相应区

效果图如下：

![f45b6ea3a7b3d870c02d027321f569b3.png][]

希望本文所述对大家的jQuery程序设计有所帮助。

[f45b6ea3a7b3d870c02d027321f569b3.png]: /images/20221024/6103e7dfd8324938b6940fd4a57dbe3a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，207人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 实现省市县三级联动

链接：[样例百度云下载][Link 1] 提取码：fk6r 模板如下，下面的class 和 data-city 啥的不能其他改变，div 里面...

小灰灰/ 2024年04月17日 05:50/ 0 赞/ 100 阅读

相关 xml java省市县三级联动_jquery读取xml文件实现省市县三级联动的方法

本文实例讲述了jquery读取xml文件实现省市县三级联动的方法。分享给大家供大家参考。具体如下：页面代码如下： My JSP 'city.jsp' starting p

Myth丶恋晨/ 2022年11月02日 16:20/ 0 赞/ 208 阅读

相关省市县三级联动

上次找到地区编码后，就测试省市县。网上找到例子感觉不是很合适，然后修改了下。本来是从自己数据库查询，但做测试的话，在网上找到了一个地区编码的api，然后就是跨域问题。原来用

朱雀/ 2022年07月16日 07:21/ 0 赞/ 298 阅读

相关省市区县三级联动JAVA+MySQL+JQuery

场景介绍：由于项目要求，需要做一个进件(新增)功能，而该功能里要用到车品牌、车系、车型的联动查询，也就是经典的三级联动。大体思路如下：

向右看齐/ 2022年07月14日 13:09/ 0 赞/ 574 阅读

相关 AJAX 实现省市县地名三级联动

AJAX 实现省市县地名三级联动本案例运用到三层架构（表现层，服务层、持久层）表现层调用服务层的方法，服务层调用持久层的方法，使用数据库为Oracle数据库，在数据库中创建

爱被打了一巴掌/ 2022年06月07日 07:06/ 0 赞/ 294 阅读

相关 jq实现省市县三级联动

一、首先是html页面 <select id="selProvince"> <option>--请选择--</optio

桃扇骨/ 2022年05月23日 07:59/ 0 赞/ 267 阅读

相关省市县三级联动

三级联动的代码\（心情很差呀，白忙了一上午，说要搞离线的，记录下来呗，已被不时之需） function hdfsUpload(){

ゝ一世哀愁。/ 2022年05月23日 01:17/ 0 赞/ 286 阅读

相关 JavaScript省市县三级联动-含源代码

目录一、省市县三级联动 1.实现思路 2.实现步骤二、源代码管理 1.HTML显示页面 2.JavaScript核心代码 3.省市县三级地址 -------

短命女/ 2022年05月08日 15:20/ 0 赞/ 296 阅读

相关 jquery实现省市县（区）三级联动

直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

﹏ヽ暗。殇╰゛Y/ 2022年05月06日 06:28/ 0 赞/ 410 阅读

相关 JS省市县三级联动输入

下载地址信息js：area.ui.js 地址：[https://pan.baidu.com/s/1eSEShHo][https_pan.baidu.com_s_1eSES

小灰灰/ 2021年09月26日 09:18/ 0 赞/ 397 阅读