注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

@从前有个T

weibo.com/sysutt

 
 
 

日志

 
 
 
 

页面多个相同表单重复读取XML的方法  

2013-02-04 17:00:51|  分类: 网络相关 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

最近在做一个项目,其中有一个添加教育经历的模块。大体上需要实现这样的一个效果,在一个XML文件中定义学校的列表(地区+学校名称),通过ajax读取这个xml文件并把它赋值给一个关联列表。用户在填写了一个教育经历后,如果还有更多的教育经历,则可以在页面中再增加一个教育经历模块。

在实际的操作过程中,发现需要解决以下几个问题:

1、利用ajax读取xml文件

2、把xml文件中的值赋予到一个相关联的二级表单中

3、可以对页面添加多个相同的表单,并且相互独立

 

利用ajax读取xml文件并不难,例如我的xml文件名为university.xml,则通过如下代码即可完成XML的读取:

 

$.ajax({
     url : "university.xml",
     success : function(xml) {
      });
     }
    });

读取成功后开始执行xml的function。
接下来,要实现赋值的操作,在xml文件中,我将地区一项命名为region,学校一项命名为university,经过这一步后的代码为:

$.ajax({
     url : university.xml",
     success : function(xml) {
      $(xml).find("region").each(function(){
       var t = $(this).attr("name");//this->  
        $(".region").append(
          "<option>" + t + "</option>");
       });
     }
    });
 
    //二级的菜单
    $(".region").change(
      function() {
       $(".university>option").remove();
       var pname = $(".region").val();
       //alert(pname);//得到一级选中的选项
       $.ajax({
        url : "university.xml",
        success : function(xml){
         $(xml).find("region[name='" + pname+ "']>university").each(function(){
           var c = $(this).attr("name")
           //alert(c);
           $(".university").append("<option>"+ c + "</option>");
 
         });
        }
       });
    });

 
执行了这一步的操作后,经过测试后发现,由于对region和university没有进行指定,在添加教育经历后,改变后一项的内容会把前面所有的表单一并修改,于是在上面的代码中又加入了选择符:

 

$.ajax({
     url : "university.xml",
     success : function(xml) {
      $(xml).find("region").each(function(){
       var t = $(this).attr("name");//this->  
        $(".region:last").append( //只有最新创建的region才会增加option值
          "<option>" + t + "</option>");
       });
     }
    });
 
    //二级的菜单
    $(".region").change(
      function() {
       $(".region:focus+.university>option").remove();//设定选中region相邻的university才会改变状态
       var pname = $(".region:focus").val();
       //alert(pname);//得到一级选中的选项
       $.ajax({
        url : "university.xml",
        success : function(xml){
         $(xml).find("region[name='" + pname+ "']>university").each(function(){
           var c = $(this).attr("name")
           //alert(c);
           $(".region:focus+.university").append("<option>"+ c + "</option>");
 
         });
        }
       });
    });



 利用jquery的选择符:last只改变最新创建的region里的选项,再利用选择符“:focus+”,只改变被选中的region相邻的university的选项,这样就可以做到添加了新的记录后不会影响到前面已经创建的表单的值了。
HTML部分的代码则比较简单:

<select" class="region" name="region"></select>
<select class="university" name="university">
         <option>选择学校</option>
</select>


其中university的select里面需要设定一个默认值“选择学校”,因为只有在region的值发生改变时才会触发university加载学校的列表。
 
至于新增一个表单的方法,也是比较简单的,比较笨的方法是用append方法,直接把原来的html代码重新写一遍;或者可以用clone+appendTo方法,把原来的表单复制一遍,然后在添加到页面制定位置即可。
  评论这张
 
阅读(336)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018