jquery实现市,县级联

1,在webroot下面,xml/address.xml

<?xml version="1.0" encoding="UTF-8"?>
<citys>
    <city name="南昌市">
        <area>昌北区</area>
        <area>东湖区</area>
        <area>西湖区</area>
        <area>青云谱区</area>
        <area>湾里区</area>
        <area>昌东区</area>
        <area>红谷滩区</area>
        <area>青山湖区</area>
        <area>南昌县</area>
        <area>新建县</area>
        <area>安义县</area>
        <area>进贤县</area>
    </city>
    <city name="景德镇市">
        <area>昌江区</area>
        <area>珠山区</area>
        <area>浮梁县</area>
        <area>乐平市</area>
    </city>
</citys>

2,jsp页面

$(document).ready(function(){
    //查找所有的城市
     $.ajax({url:"<%=path%>/xml/address.xml",
          success:function(xml){
             $(xml).find("city").each(function(){
                  var t = $(this).attr("name");//city节点的name属性
                  $("#city").append("<option>"+t+"</option>");
             });
          }
     });

     //区,            城 市变化时,查找对应的区县
     $("#city").change(function(){
             $("#area>option").remove();
             var cname = $("#city").val();

             $.ajax({url:"<%=path%>/xml/address.xml",
                 success:function(xml){
                  ///查找<city>下的所有第一级子元素(即区域)
                     $(xml).find("city[name=‘"+cname+"‘]>area").each(function(){
                         var area = $(this).text();//area标签的内容
                         $("#area").append("<option>"+area+"</option>");
                     });
                 }
             });
     });

});

页面

1 <select id="city" name="model.cs" style="width: 185px;">
2                                     <option>请选择城市</option>
3                                 </select>
4
5 <select id="area" name="model.qx" style="width: 185px;">
6                                     <option>请选择相应区县</option>
7                                 </select>
时间: 2024-09-20 20:49:25

jquery实现市,县级联的相关文章

Django分析之三级下拉菜单选择省/市/县

今天遇到了一个一直想做却没有机会去做的功能,今天完成了便记录下来. 那这次是具体是个什么功能呢?其实还是很简单的效果,就是在用户注册的时候可以选择省/市/县,很简单的一个小功能. 那现在就开始了~首先我们要在数据库中先建一个表,用来保存全国的省/市/县信息,下面是表的结构: CREATE TABLE IF NOT EXISTS "china_regionalTable" ( "id" integer NOT NULL, "name" varcha

jquery 的combobox 处理级联

随笔---jquery 的combobox 处理级联 ------------------------html------------- <select id="groupId" name="groupId" style="width: 123px;"> </select> --------------------------js------------------------ $(document).ready(func

夜深了,写了个JQuery的省市区三级级联效果

刚刚练手的JQuery,希望大神们指正 主要实现以下功能: 1.三级菜单级联加载数据 2.可以在不操作脚本的情况下,给元素加属性实现级联功能 3.自定义动态显示数据 咨询问题: 对于一般比较固定不变的数据,是不是应该生成静态的文件,直接加载整个数据文件,访问文件比较好?还是这样动态的访问比较好? 一般的数据文件,小的会在50k,大的会在3M 这个可以讨论下 1 /** 2 省市区县级联 3 */ 4 (function($){ 5 6 /* 7 * 8 *获取ele的相对元素 9 * 10 **

使用combobox下拉列表框实现省 市 县 的三级联动

package com.hanqi.entity; //地区 public class Region { //地区id private String regionID; //地区名称 private String regionName; //上级地区id private String parentRegionID; public String getRegionID() { return regionID; } public void setRegionID(String regionID) {

自己编写jQuery插件 之 无限级联下拉框

因为是级联,所以数据必须是树型结构的,我这里的测试数据如下: 看下效果图: 1.>图一: 2.>图二: 3.>图三: 由图可知,下拉框的个数并不是写死的,而是动态加载的.每当下拉框选择改变的时候,会发送一次ajax请求,请求成功返回json格式数据,当返回的数据不为空时(即有子节点时),则会向页面中添加一个下拉框,没有则不添加. 插件的实现代码如下: (function ($) { $.fn.CascadingSelect = function (options) { //默认参数设置

easyui-combobox实现省-市-区县级联菜单

省:<input id="sheng" class="easyui-combobox" style="width:100px" data-options="{ url:'RegionServlet?parentid=0', valueField:'regionID', textField:'regionName', onSelect:function(region){ $('#shi').combobox('clear'); //

jQuery EasyUI CheckBoxTree的级联选中

需求:子结点选中,父节点随之选中,父节点取消,子节点随之取消 代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> &

jquery三级导航,级联菜单精简

这是使用jQuery编辑的二级导航栏,效果是这样的. 而事实上,关于样式部分完全可以自由布局和修改,只要结构正确就行. 1.下面是html部分 <ul id="nav"> <li><a href="#">一级导航1</a></li> <li><a href="#">一级导航2</a> <ul> <li><a href=&q

深入浅出ExtJS 第四章 表单与输入控件(未完)

1 4.1 制作表单 2 var form = new Ext.form.FormPanel({ 3 title:'form', 4 defaultType:'textfield', 5 buttonAlign:'center', 6 frame:true, 7 width:220, 8 fieldDefaults:{ 9 labelAlign:'right', 10 labelWidth:70 11 }, 12 tiems:[{ //子组件; 13 fieldLabel:'文本框' //文本框