`

jquery解析xml生成html拼接到下拉框等(含jar包)

阅读更多
jquery解析xml生成html拼接到下拉框等


jquery解析json拼接到下拉框请参考http://patronli.iteye.com/blog/2383734
ajax请参考http://patronli.iteye.com/blog/2324171


话不多少直接上代码,也是作为记录用,翻看查阅方便

1、后台代码(将数组转换成xml)
List<CityModel> citys=cs.doGetCitysByPid(pid);//读取数据
XStream xt=new XStream();//声明对象
//xt.alias("city", CityModel.class);//修改名字
//xt.useAttributeFor(CityModel.class, "cid");//将类中的属相修改为标签中的属性
String citysXml=xt.toXML(citys);//转换xml

2、前台jquery代码
我们将要解析的xml格式如下,也就是后台传递到前台的数据格式,我这样写出来便于理解
<city>
        <cid>1</cid>
        <cname>洛阳</cname>
</city>
<city>
        <cid>2</cid>
        <cname>上海</cname>
</city>
//接下来就是解析xml
 var city=$("#city");
$(data).find("city").each(function(){ 
	var cid=$(this).children("cid").text();
	var cname=$(this).children("cname").text();
        city.append("<option value='"+cid+"'>"+cname+"</option>");
});

3、jsp代码如下
<select id="city" name="city">
			<option value="0">--请选择--</option>
</select>


附件为:生成xml所需的jar包
分享到:
评论

相关推荐

    jQuery解析xml文件,实现省市县三级联动下拉框

    本主题将探讨如何利用jQuery解析XML文件,进而实现省市县三级联动的下拉框效果,这是一种常见的地理数据展示方式,常用于地址选择或者物流配送等场景。 首先,XML(Extensible Markup Language)是一种用于存储和...

    jquery+html自定义select下拉框,下拉框美化

    不过,由于`&lt;select&gt;`元素的限制,我们需要使用jQuery来实现更复杂的行为,如打开和关闭下拉菜单、处理用户交互等。这里的关键是使用jQuery的事件监听器(如`click`、`mouseover`)和DOM操作方法(如`addClass`、`...

    jQuery插件-多选全选实时搜索下拉框

    **jQuery插件-多选全选实时搜索下拉框** 在前端开发中,用户界面的交互性和用户体验至关重要。jQuery作为一款强大的JavaScript库,为开发者提供了许多便利,使得创建动态、响应式的网页变得更加容易。"jQuery插件-...

    jquery动态创建联动下拉框

    3. **动态创建子下拉框的选项**:在Ajax请求成功后,我们需要解析返回的JSON数据,并根据数据生成`&lt;option&gt;`元素。 ```javascript success: function(response) { var subcategories = JSON.parse(response); $(...

    jquery获取后台数据生成下拉框

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互等任务。本文将深入探讨如何使用jQuery结合Ajax技术从后台获取数据,并动态生成下拉选择框(Dropdown List)。 首先...

    jQuery多选下拉框插件

    **jQuery多选下拉框插件详解** 在Web开发中,多选下拉框是一种常见的交互元素,它允许用户在一组选项中选择多个值。jQuery作为最流行的JavaScript库之一,提供了许多插件来增强这种用户体验。`jquery.multi-select....

    jQuery手机下拉框select

    jQuery库提供了一种优雅的方式来解决这个问题,使得在手机上使用下拉框变得更加友好和可定制。`jQuery手机下拉框select` 主要关注于改善移动端的用户体验,通过JavaScript和CSS增强下拉框的外观和功能。 ### jQuery...

    基于jquery实现的多选下拉框

    **基于jQuery实现的多选下拉框** 在Web开发中,传统的HTML下拉框(`&lt;select&gt;`元素)通常只支持单选,但有时我们可能需要一个可多选的下拉框来提供用户更多的选择灵活性。这篇教程将详细介绍如何利用jQuery库来创建...

    使用Jquery实现带有搜索框的下拉框

    当用户选择了一个选项后,可以通过监听点击事件来获取选中的值,并更新其他相关部分,例如隐藏下拉框或填充到某个字段中: ```javascript $dropdownContainer.on('click', '.option', function() { var ...

    jQuery实现带搜索功能的下拉框

    例如,你可以设置搜索框的初始文本、搜索匹配的模式(如全词匹配或模糊匹配)、是否自动展开下拉框等。例如: ```javascript $('#mySelect').searchableSelect({ placeholder: '请输入搜索关键词', match: '...

    基于XML的可配置Html下拉框的设计与实现.pdf

    "基于XML的可配置Html下拉框的设计与实现.pdf" 本文主要介绍了基于XML的可配置Html下拉框的设计与实现方法,该方法可以提高网页性能、方便界面关工、提高雏护效率。 Html下拉框控件是Web下拉框控件的替代品,它...

    jQuery支持模糊查询下拉框菜单选择代码

    jQuery提供了`keyup`、`keydown`和`input`等事件,其中`input`事件特别适合实时监控输入框的变化。例如,`$('input').on('input', function() {...})`可以在输入框内容改变时执行回调函数。 五、实时更新下拉框 在...

    JQuery+年月日三级下拉框联动

    这个设计涉及到JavaScript库JQuery的使用,以及HTML下拉框(select)的动态联动效果。下面我们将详细探讨这个知识点。 首先,JQuery是一个广泛使用的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画...

    jQuery下拉框美化插件.zip

    使用这款插件时,开发者需要将jQuery库和插件的JavaScript及CSS文件引入到网页中,然后通过jQuery选择器找到需要美化的下拉框,并调用相应的插件方法进行初始化。例如: ```html &lt;script src="path/to/jquery.js"&gt; ...

    使用XML文件实现3级下拉框级联

    3. **创建下拉框**:根据解析到的数据,动态创建HTML的`&lt;select&gt;`元素。一级下拉框的选择应触发二级下拉框的更新,二级下拉框的选择则更新三级下拉框。可以使用JavaScript事件监听器来实现这种联动。 4. **更新...

    jQuery多层级加强版的select下拉框.rar

    jQuery多层级加强版的select下拉框,完成了Select的功能,但是功能上比Select更高级,具备4级子项内容的选择,另外是外观样式上也与传统的Select下拉框有些区别,这款效果来自国外网站,跟随源码包中的效果演示即可...

    js 可输入下拉框(jquery)

    在JavaScript和jQuery的世界里,"js 可输入下拉框(jquery)"是一个常见的交互设计需求,它结合了传统下拉框的简洁性与输入框的搜索功能,为用户提供更友好的交互体验。这种组件通常被称为“Autocomplete”或...

    jquery实现百度搜索关键字输入下拉框提示

    本项目"jquery实现百度搜索关键字输入下拉框提示"是利用 jQuery 实现类似百度搜索框的功能,即用户在输入框中输入关键词时,能实时显示与关键词相关的下拉提示,提高用户的搜索体验。 首先,`index.html` 是网页的...

    jQuery下拉框国家选择代码

    本项目“jQuery下拉框国家选择代码”是为网页开发者提供的一款实用工具,它允许用户在下拉菜单中选择全世界的国家,并且具备搜索功能和国旗图标显示,提升了用户体验。 首先,我们要了解jQuery如何实现下拉框的动态...

    xml城市下拉框联动

    在前端部分,我们可以使用JavaScript或者jQuery等库来处理XML数据并实现联动效果。以下是一个基本的步骤: 1. **加载XML数据**:使用`XMLHttpRequest`或`fetch` API获取XML文件内容,并使用DOM方法解析XML。 2. **...

Global site tag (gtag.js) - Google Analytics