Jquery ajax下拉框联动（用xml存放数据）

最新推荐文章于 2024-07-10 06:14:25 发布
最新推荐文章于 2024-07-10 06:14:25 发布
阅读量3.5k 收藏
点赞数
分类专栏： 富客服端技术 文章标签： xml jquery ajax function encoding url

demo.jsp

  1. <%@ page language= "java"   import = "java.util.*"  pageEncoding= "utf-8" %>  
  2. <html>  
  3. <head>  
  4. <title>jquery xml解析</title>  
  5. <script type="text/javascript"  src= "js/jquery-1.3.2.js" ></script>  
  6. <script type="text/javascript" >  
  7.     $(document).ready(  
  8.             function() {  
  9.                 $.ajax( {  
  10.                     url : "xx.xml" ,  
  11.                     success : function(xml) {  
  12.                         $(xml).find("province" ).each(function() {  
  13.                             var t = $(this ).attr( "name" ); //this->      
  14.                                 $("#DropProvince" ).append(  
  15.                                         "<option>"  + t +  "</option>" );  
  16.                             });  
  17.                     }  
  18.                 });  
  19.                 $("#DropProvince" ).change(  
  20.                         function() {  
  21.                             $("#sCity>option" ).remove();  
  22.                             var pname = $("#DropProvince" ).val();  
  23.                             $.ajax( {  
  24.                                 url : "xx.xml" ,  
  25.                                 success : function(xml) {  
  26.                                     $(xml).find(  
  27.                                             "province[name='"  + pname  
  28.                                                     + "']>city" ).each(  
  29.                                             function() {  
  30.                                                 $("#sCity" ).append(  
  31.                                                         "<option>"   
  32.                                                                 + $(this )  
  33.                                                                         .text()  
  34.                                                                 + "</option>" );  
  35.                                             });  
  36.                                 }  
  37.                             });  
  38.                         });  
  39.             });  
  40. </script>  
  41. </head>  
  42. <body>  
  43. <form id="form1" >  
  44. <div>  
  45.     <select id="DropProvince"  style= "width: 60px;" >  
  46.         <option>请选择</option>  
  47.     </select>  
  48.     <select id="sCity"  style= "width: 60px;" >  
  49.     </select>  
  50. </div>  
  51. </form>  
  52. </body> 
  53. </html>
  54. xx.xml

  56. <?xml version= "1.0"  encoding= "utf-8"  ?>    
  57. <provinces>    
  58.     <province name="湖北" >    
  59.         <city>武汉</city>    
  60.         <city>黄石</city>    
  61.         <city>宜昌</city>    
  62.         <city>天门</city>    
  63.     </province>    
  64.     <province name="湖南" >    
  65.         <city>邵阳</city>    
  66.         <city>长沙</city>    
  67.         <city>岳阳</city>    
  68.     </province>    
  69.     <province name="广东" >    
  70.         <city>广州</city>    
  71.         <city>深圳</city>    
  72.     </province>    
  73. </provinces> 
zzsyzjb
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AJAX解析XML实例之下拉框二级联动
每天多一点
11-14 1934
这个例子是实现省、市二级联动，当选择某一省时，改省下面的市就会在另一个下拉框显示出来。在本例中AJAX通过解析XML文件得到的数据传回到jsp页面，其中省市均是从数据库取到的值： jsp页面代码： <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getSe
AJAX里，使用XML返回数据类型，实现简单下拉列表
weixin_30809333的博客
11-19 72
XML：可扩展标记语言 HTML：超文本标记语言 标签：<标签名></标签名> 特点： 1.必须要有一个根 2.标签名自定义 3.对大小写敏感 4.有开始就要有结束 5.同一级别下只能有一个标签名 <nation> <n1> <code>n001</code> &lt...
jquery解析xml生成html拼接到下拉框等（含jar包）
keguan_li的博客
07-08 203
[align=center][size=large][color=red][b]jquery解析xml生成html拼接到下拉框等[/b][/color][/size][/align] jquery解析json拼接到下拉框请参考[url]http://patronli.iteye.com/blog/2383734[/url] ajax请参考[url]http://patronli.iteye...
JQuery学习之each方法
止水
07-11 367
each方法可以遍历某个集合，例如：     $(".box ul li").each(function(i){         var width = $(this).width();         $(this).width(width + 50);     }); 以上代码遍历了所有li，设置每个li的宽度在其原有基础上增加50像素。
jquery解析xml的例子
quanleilei123的专栏
07-06 3164
<br />1、首先创建一个web工程<br />2、在/JQuery/WebRoot/js/目录下构建jquery-1.4.2.js、menu.js这两个文件（这两个文件可以到官方网站上面下载）<br />3、创建jqueryxml.xml文件：具体内容如下<br /><?xml version="1.0" encoding="utf-8" ?><br /><provinces><br /> <province name="湖北"><br />  <city>武汉</city><br />  <city>
级联查询ajax,Jquery+Ajax下拉框级联查询
weixin_39663593的博客
08-06 452
Jquery代码$(function(){//提交事件$("#ImageButton1").click(function(){//省Idvar provinceId=$("#selProvince").val();//市Idvar cityId=$("#selCity").val();//区县Idvar districtId=$("#selDistrict").val();//把省市区ID赋值到隐...
jQuery+ajax实现省市区（县）下拉框三级联动
tan1024的博客
03-16 1935
jQuery+ajax实现省市区（县）下拉框三级联动 一，首先创建数据库 为数据表添加数据 省级表 市级表 区（县）级表 二，代码实现 首先是我的项目结构 1，创建实体类和工具类 省实体类 package cn.tb.entity; public class Province { private int pid; private String pname; public int getPid() { return pid; } public
ajax联动查询怎么做,jquery+ajax+xml,实现地区三级联动菜单无需数据库查询
weixin_26765287的博客
08-05 204
jquery+ajax+xml,实现地区三级联动，运行速度快，性能要比连接mysql要高很多，而且比连接mysql操作更简单，方便，高效!HTML:地区三级联动省份：-请选择-城市：-请选择-地区：-请选择-Jquery:varxmldom=null;//声明一个全局变量，用于存储第一次请求回来的xml信息//获取并显示省份functionshowprovince(){//①ajax去...
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
10-26
总的来说，这个解决方案结合了jQuery的事件处理、DOM操作和AJAX技术，实现了动态加载和保存用户选择的三级下拉框联动。同时，利用Cookie保证了页面刷新后的状态一致性，提高了用户体验。在实际开发中，可能还需要...
Jquery各种插件和JQuery Ajax三级联动地区下拉框 & 非Ajax实现三级联动
04-19
标题 "Jquery各种插件和JQuery Ajax三级联动地区下拉框 & 非Ajax实现三级联动" 提供了我们讨论的关键技术点：jQuery、jQuery插件、Ajax以及三级联动地区下拉框的实现。这篇博客（博文链接：...
jquery ajax 三级联动
01-21
5. 数据处理：服务器返回JSON数据后，使用jQuery的`$.parseJSON()`解析JSON，然后动态添加选项到相应的下拉框中。 6. 错误处理：添加错误回调函数，处理请求失败的情况，例如显示错误信息。 通过这种方式，我们...
jQuery解析xml文件，实现省市县三级联动下拉框
08-02
本主题将探讨如何利用jQuery解析XML文件，进而实现省市县三级联动的下拉框效果，这是一种常见的地理数据展示方式，常用于地址选择或者物流配送等场景。 首先，XML（Extensible Markup Language）是一种用于存储和...
jquery 省市联动下拉框
03-25
标题中的“jquery 省市联动下拉框”是指在网页设计中，使用jQuery库实现的一个功能，允许用户从一个下拉框选择省份后，另一个下拉框会自动更新为对应省份的城市列表。这种功能常见于需要用户输入详细地址的表单中，...
使用引用 XML 文件来优化 EtherCAT ESI 文件的描述
波波诸葛伟
07-08 630
ESI 文件包含了关于供应商的信息（）以及至少一个 EtherCAT 从设备的描述（这些文件对 EtherCAT 主站了解和控制从设备至关重要。通过以上的例子，我们可以看到，使用引用 XML 文件的方式，不仅减少了冗余描述，还简化了文件的维护工作。在需要更新通用配置时，只需修改文件，所有引用该文件的 ESI 文件都会自动获取最新的配置。这种方法提高了文件管理的效率，使系统更加灵活和易于维护。
DOM XMLHttpRequest
lsx202406的博客
07-09 325
是一种 JavaScript 对象，它最初由 Microsoft 在 Internet Explorer 5 中引入，用于在后台与服务器交换数据。这个对象可以在不重新加载整个网页的情况下，更新网页的部分内容。这种技术通常被称为 AJAX（Asynchronous JavaScript and XML），尽管现在它不仅仅用于 XML 数据。
XML Schema 杂项数据类型
最新发布
lly202406的博客
07-10 178
XML Schema 提供了多种杂项数据类型，用于处理特定的数据格式和验证需求。了解和掌握这些数据类型的使用方法和特点，可以帮助我们更准确地定义 XML 文档的结构和内容，提高数据的可靠性和可维护性。
ETAS工具导入Com Arxml修改步骤
赞的博客
07-06 195
通讯协议栈开发一般通过导入DBC实现，ETAS工具本身导入DBC也是生成arxml后执行cfggen,本文介绍直接导入客户提供的arxml文件，实现通讯协议栈的生成。通过Arxml导入相比于DBC来说，少了从DBC转为arxml的过程。而且arxml中能提供的信息也会更多。如果是DBC的话，很多信息（如PNC的映射，CANTP的配置等）都需要额外配置。不过还有连DBC都无法提供的，那就更麻烦了~
spring xml实现bean对象（仅供自己参考）
qq_61839608的博客
07-08 214
原型（prototype）：通过设置scope属性，来指定bean的作用域为圆形模式，在自动注入的时候，bean容器会创建一个新的对象，把这个新的对象赋值给所需要的对象。单例（singleton）：通过设置scope属性，来指定bean的作用域为单例模式，也就是说，所有的对象注入都是用的bean容器中那唯一一个对象。Spring Bean生命周期大致可以分为以下 5 个阶段：1.Bean 的实例化、2.Bean 属性赋值、3.Bean 的初始化、4.Bean 的使用、5.Bean 的销毁。
jquery mobile 下拉框post异步获取数据的例子
03-28
以下是一个基本的示例，演示如何使用jQuery Mobile下拉框和AJAX从服务器异步检索数据。 HTML代码： ```html <!DOCTYPE html> <title>jQuery Mobile 下拉框异步获取数据示例 , initial-scale=1"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值