`
lysongfei
  • 浏览: 60188 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JQuery二级级联菜单

阅读更多
JS库 doc_input.js
// 动态生成来文单位二级下拉单位列表
function sub_orign(obj) {
		$('#orgid').val($('#item_origin option:selected').text());
		//alert(obj.value);
	if (obj.value == "0") {
		$("#suborign").empty();
	} else {
		$("#suborign").empty();
		var url = 'subdept.action';
		var params = {
			subid : obj.value
		};
		jQuery.post(url, params, callbackOrg, 'json');
	}
}

// 来文单位级联菜单回调函数
function callbackOrg(data) {
	//alert(data.result);
	/*返回结果为空,表示没有下级单位*/
	if (data.result == "") {		
		$("#suborigin").empty();
		$("#item_origin").attr("name","preorign");
		//$("#orgid").val($("#item_origin option:selected").text());
		//alert($("#item_origin").attr("name"));
	} else {	//有二级下属单位
		alert(data.result);
		var temp = data.result.split(",");
		$("#suborigin").html("demojdflsajfldsj");
		$("#suborigin").html(
				"<select class='txt' name='preorign' id='org' onchange='org_change()'></select>");
		for ( var i = 0; i < temp.length - 1; i++) {
			var tempOption = document.createElement("option");
			tempOption.value = temp[i];
			tempOption.innerHTML = temp[i];
			$("#org").append(tempOption);
		}
			}
}

// 动态生成收文单位二级下拉列表
function sub_destination(obj) {
	if (obj.value == "0") {
		// alert(obj.value);
		$("#subdestination").empty();
	} else {
		var url = 'subdept.action';
		var params = {
			subid : obj.value
		};
		jQuery.post(url, params, callbackDes, 'json');
	}
}

// 收文单位级联菜单回调函数
function callbackDes(data) {
	if (data.result == "") {
		$("#subdestination").empty();
		$("#item_destination").attr("name","predestination");
		$("#desid").val($("#item_destination option:selected").text());
		//alert($("#item_destination").attr("name"));
	} else {
		var temp = data.result.split(",")
		$("#subdestination").html(
				"<select class='txt' name='predestination' id='des' onchange='des_change()'></select>");
		for ( var i = 0; i < temp.length - 1; i++) {
			var tempOption = document.createElement("option");
			tempOption.value = temp[i];
			tempOption.innerHTML = temp[i];
			$("#des").append(tempOption);
		}
		$("#desid").val($("#des option:selected").text());
	}
}



HTML代码
<tr>
   <td align="right">
    <font color="#6666FF">来文单位</font>   </td>
   <td height=37 valign="middle">
    <span class="span1" > 
     <input type="text" name="origin" id="orgid"
      style="width:282px;height:15px;border:0pt;top:100px" 
      
      value="---请选择或输入---"> </span>
    <span class="span2"> 
     <select name="itemorigin" id="item_origin"
      style="width:302px;height:20px;margin:-2px;" 
      onChange="sub_orign(this)">
      <option value="0">请选择</option>
      <%
         for(int i= 0;i < dep_list.size();i++){
          dep = (Department)dep_list.get(i);
        %>
     <option value="<%=dep.getDeptno()%>"><%=dep.getDeptname()%></option>
     <% }%>
     </select> 
    </span>    </td>
  </tr>
  
  <tr>
   <td align="right">
    <font color="#6666FF">收文单位</font>   </td>
   <td align="left">
    <select name="itemdestination" id="item_destination" class="txt"
     onchange="sub_destination(this)">
     <option value="0">
      请选择     </option>
     <%
         for(int i= 0;i < dep_list.size();i++){
          dep = (Department)dep_list.get(i);
        %>
     <option value="<%=dep.getDeptno()%>"><%=dep.getDeptname()%></option>
     <% }%>
    </select>
    <span id="subdestination"></span>   </td>
  </tr>

 

分享到:
评论

相关推荐

    jquery仿京东二级级联菜单导航

    本项目“jquery仿京东二级级联菜单导航”旨在实现一个类似京东商城的下拉二级菜单,利用jQuery库来增强用户体验。这个功能通常用于大型网站,尤其是电商网站,因为它们通常具有多级分类,通过级联菜单可以有效地展示...

    jquery3级级联

    从给定的文件信息来看,我们正在探讨的主题是“jquery3级级联”,这是一个涉及到JavaScript库JQuery在网页上实现三级下拉菜单级联选择功能的话题。以下是对这个主题的详细解析: ### 1. 什么是3级级联? 3级级联指...

    级联菜单 (二级级联 三级级联)

    二级级联菜单意味着主菜单有一个子菜单,而三级级联菜单则在二级的基础上再增加一级子菜单。例如,一个网站的导航栏可能有"产品"这个主菜单,点击后展开显示"电子产品"、"家居用品"等二级子菜单,进一步点击"电子...

    二级级联菜单

    总结来说,这个项目结合了前端的jQuery交互与后端的MySQL数据获取,通过Servlet作为桥梁,实现了动态加载的二级级联菜单。这个过程中,前端和后端的紧密协作是关键,以确保用户体验流畅且数据实时更新。

    Ajax (jQuery) 全国城市三级级联菜单插件

    在本案例中,我们讨论的是使用jQuery库实现的全国城市三级级联菜单插件,它使得用户能够在下拉菜单中选择省份、城市以及区县,以实现快速筛选或输入数据的目的。 首先,jQuery是一个广泛使用的JavaScript库,它简化...

    Jquery网站导航级联菜单(Jquery1.8.3)

    `Jquery`,作为一款广泛使用的JavaScript库,提供了强大的功能来创建动态和交互式的导航菜单。本篇将深入探讨如何利用`jQuery 1.8.3`版本实现横排和竖排的下拉菜单,以及在实际项目中的应用。 首先,我们了解`...

    4级级联菜单JQUERY+JSON版

    "4级级联菜单JQUERY+JSON版"是一个利用JavaScript库jQuery和数据格式JSON实现的多级联动菜单的示例。这个项目主要展示了如何在现代浏览器(如Chrome、Firefox、Opera以及IE11)中创建一个可扩展且功能丰富的四级菜单...

    Jquery网站导航级联菜单(Jquery1.7.2)

    **jQuery 网站导航级联菜单详解** 在网页设计中,导航菜单是用户与网站交互的重要元素之一,它能够帮助用户快速定位并访问所需内容。`jQuery` 是一款广泛使用的 JavaScript 库,其强大的功能使得创建动态、交互性强...

    jQuery+ajax实现三级级联

    在这个“jQuery+ajax实现三级级联”的实例中,我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统,这在数据筛选和表单填写中十分常见,如地区选择、部门分类等场景。 首先,jQuery是一个轻量级...

    JSP+AJAX+MYSQL实现二级级联菜单

    在IT领域,构建动态、交互性强的Web应用是常见的需求,而"JSP+AJAX+MYSQL实现二级级联菜单"就是一个典型的实例。这个技术组合主要用于创建能够实时更新且具有前后端交互功能的Web界面,使得用户在选择一级菜单时,...

    java web下开发二级级联下拉菜单(数据库实现的)

    在Java Web开发中,二级级联下拉菜单是一种常见的用户界面元素,用于提供层次结构的选择。这个场景中,我们利用数据库存储数据,并通过后端处理逻辑动态生成这些下拉菜单。下面将详细介绍如何使用MySQL数据库来实现...

    .netMVC架构下无刷新三级级联菜单源码

    本示例中的".net MVC架构下无刷新三级级联菜单源码"是一个典型的前端与后端交互场景,它展示了如何利用ASP.NET MVC框架以及DropdownList控件来实现一个动态的、无需页面刷新的三级级联菜单。这个菜单的数据是从...

    jquery+ajax+jsp+servlet实现二级级联菜单

    ### 使用jQuery、Ajax、JSP与Servlet实现二级级联菜单 #### 一、项目背景与技术栈概述 本文档将详细介绍如何使用jQuery、Ajax、JSP与Servlet来实现一个简单的二级级联菜单功能。该功能常见于许多Web应用程序中,如...

    Jquery实现ajax二级级联查询

    本主题聚焦于“Jquery实现ajax二级级联查询”,这是一个常见的前端交互设计,常见于下拉菜单联动,例如省份选择后自动更新城市选择。在这个场景中,我们通常会利用服务器端(如JSP或Servlet)动态生成XML文件,因为...

    javascript实现二级级联菜单的简单制作

    通过上述知识点的学习,我们可以理解如何使用JavaScript和HTML结合jQuery来制作一个简单的二级级联菜单。这些知识点对于前端开发人员来说是基础且重要的,能够帮助开发者构建更加友好和互动的网页用户界面。

    级联 jquery json格式 二级级联

    在这个场景中,我们讨论的是使用jQuery库来实现JSON格式数据的二级级联下拉菜单。这种功能常见于多级分类选择、地区选择等,它可以提供更流畅、更直观的用户体验。 jQuery是一个轻量级、高性能的JavaScript库,它...

    asp+access五级级联菜单

    五级级联菜单通常指的是在一个下拉菜单中,有五个层次的子菜单,当用户选择一级菜单时,会展示对应的二级菜单,依此类推,直至第五级。这种菜单结构常见于网站的导航系统,能够帮助用户快速深入到网站的各个细分领域...

    基于ajax、jquery 通用无限级联菜单

    引用场景: 国家省市级联菜单、任何二级级联菜单、三级菜单、四级菜单、五.... 使用范例:详细参阅District.Selector.js文件 以国家地理信息为例: $(function () { var District1 = new District("userDistrict",{...

    jQuery城市级联插件

    jQuery城市级联插件是一种基于JavaScript库jQuery实现的交互式下拉菜单组件,主要用于处理多级联动选择,例如在网站上实现省、市、区的三级联动选择效果。这种插件能够提供用户友好的界面,使得用户在选择地理位置时...

    jsp+json+mySql 实现二级级联下拉菜单

    在本文中,我们将深入探讨如何使用JSP、JSON和MySQL来实现一个二级级联下拉菜单。这个功能常用于网站的表单设计中,让用户能够从相关联的分类中选择选项,例如省份与城市的选择。 首先,让我们了解这三个技术的核心...

Global site tag (gtag.js) - Google Analytics