根据后台数据写地区联动

function initAreaSelect(firstLevelId, secondLevelId) {
  var firstLevel=document.getElementById(firstLevelId);
  var secondLevel=document.getElementById(secondLevelId);
  //插入第一级数据
  for (var i=0; i<localArea.data.children.length; i++) {
    var firstLevelNode=localArea.data.children[i];
    var optionNode = document.createElement("option");
    optionNode.text=firstLevelNode.name;
    optionNode.value=firstLevelNode.id;
    firstLevel.appendChild(optionNode);
  }
  //第一级改变时,修改第二级的select
  firstLevel.onchange=function() {
    var selectId=firstLevel.options[firstLevel.selectedIndex].value;
    var selectName=firstLevel.options[firstLevel.selectedIndex].text;
    var formatFirstLevel = selectId +"-"+selectName;
    var sLength=secondLevel.length;
    for (var i=0; i<sLength; i++) secondLevel.remove(0);
    for (var i=0; i<localArea.data.children.length; i++) {
      var firstLevelNode=localArea.data.children[i];
      if (firstLevelNode.id==selectId) {
        if (firstLevelNode.children) {
          var optionNode = document.createElement("option");
          optionNode.text="请选择";
          optionNode.value=-1;
          secondLevel.appendChild(optionNode);
          for (var j=0; j<firstLevelNode.children.length; j++) {
            var secondLevelNode=firstLevelNode.children[j];
            var optionNode = document.createElement("option");
            optionNode.text=secondLevelNode.name;
            optionNode.value=secondLevelNode.id;
            secondLevel.appendChild(optionNode);
          }
        }
        break;
      }
    }
    secondLevel.onchange=function() {
	  var selectId=secondLevel.options[secondLevel.selectedIndex].value;
	  var selectName=secondLevel.options[secondLevel.selectedIndex].text;
	  var formatSecondLevel = selectName +"-"+selectId;
	  $("#localworkarea").val(formatFirstLevel +","+formatSecondLevel);
	}
  }
}
initAreaSelect("workCity", "workArea");

  

原文地址:https://www.cnblogs.com/TigerZhang-home/p/8269222.html

时间: 2024-10-08 22:29:39

根据后台数据写地区联动的相关文章

C# 将后台数据 写到前台脚本中去【控制页面中某些脚本只在 页面第一次加载的时候才去 执行】

protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { this.domainBind(); Page.RegisterClientScriptBlock("F1", "<script>var c=1</script>"); } else { Page.RegisterClientScriptBlock("F0", &qu

jQuery写省级联动列表,创造二维数组,以及如何存/调用二维数组中的数据

jQuery写省级联动列表,创造二维数组来存放数据,然后通过each来遍历调用,通过creatTxtNode创建文本节点,通过createElement创建标签option,在通过append将文本写入option,再通过appendTo将文本追加到id为city的市级列表中 代码如下: jquery部分: 1 <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8

自定义PopupWindow实现3急地区联动

做项目时有时我们会需要3级联动,比如注册,买东西下单等,这里我在android上使用popupwindow实现3级联动功能,我实现的思路是,当程序启动时就将后台的地区JSON数据格式全部加载上来,通过SharedPreferences将获取到的数据保存,点击按钮获取SharedPreferences中的地区数据,再通过JSONObject转为List集合,具体实现如下: 布局文件: activity_main.xml: <LinearLayout xmlns:android="http:/

使用原生ajax访问后台数据并将其展现在前端页面中(小菜鸟自己整理玩的,大神勿喷)

首先你要有php的环境,关于php环境的搭建,php本地站点的搭建,此处不再重复请看这里:http://www.cnblogs.com/Gabriel-Wei/p/5950465.html我们把wamp打开,并且在Dreamweaver里面新建一个phpStudy站点.这篇文章我们需要两个文件,一个test.html前端的页面,一个tigong.php数据的提供页,下面分别进行介绍. tigong.php我们在Dreamweaver,phpStudy站点下面,新建一个tigong.php页面,里

学习笔记_springmvc返回值、数据写到页面、表单提交、ajax、重定向

数据写到页面 后台往前台传数据 TestController添加 /** * 方法的返回值采用ModelAndView, new ModelAndView("index", map);, * 相当于把结果数据放到request里面 * @return * @throws Exception */ @RequestMapping("/toPerson4.do") public ModelAndView toPerson4() throws Exception{ Per

springmvc返回值、数据写到页面、表单提交、ajax、重定向

实验是在前一篇文章的项目上做的: 数据写到页面 后台往前台传数据 TestController添加 /** * 方法的返回值采用ModelAndView, new ModelAndView("index", map);, * 相当于把结果数据放到request里面 * @return * @throws Exception */ @RequestMapping("/toPerson4.do") public ModelAndView toPerson4() thro

JavaWeb如何将后台数据传递到前台页面HttpServletResponse和HttpServletRequest

继续总结:Java经过Action后,怎么将action中返回的数据写到前台去 先了解下:HttpServletResponse对象 (1).Web服务器收到一个http请求,会针对每个请求创建一个HttpServletRequest和HttpServletResponse对象,向客户端发送数据找HttpServletResponse,从客户端取数据找HttpServletRequest; (2).HttpServletResponse对象可以向客户端发送三种类型的数据:a.响应头b.状态码c.

关于上传文件 非ajax提交 得到后台数据问题

<form name="configForm" id="configForm" method="post" action="" > .......... </form> 根据id获得表单数据然后发送ajax请求,获得后台返回数据,处理数据,完美. 但是如果需要上传文件, <tr> <td class="fontSize">请选择文件:</td> &

浅谈webform开发时前台请求后台数据的方法

说到前台请求后台数据,我们一般都是用到AJAX(异步JavaScript和XML) .AJAX 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,我们可以对网页的某部分进行更新.在这里,主要浅谈一下在.net的webform开发时,前台请求后台的两种方式. 1.使用AjaxPro2.dll  (1)AjaxPro2.dll文件可以去网上下载,下载后引用到项目中. (2)引用到项目之后,在web.config里面的<system.web