`
忧里修斯
  • 浏览: 436206 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

js创建下拉列表树

阅读更多
1、html

<tr>
	<td align="right">
		商品分类:
	</td>
	<td>
		<select name="cat_id" onchange="hideCatDiv()">
			<option value="">
				请选择...
			</option>
			<%=categorySelect%>
		</select>
		<a href="javascript:void(0)" onclick="rapidCatAdd()"
			title="添加分类" class="special">添加分类</a>
		<span id="category_add" style="display: none;"> <input
				class="text" size="10" name="addedCategoryName" /> <a
			href="javascript:void(0)" onclick="addCategory()"
			title=" 确定 " class="special"> 确定 </a> <a
			href="javascript:void(0)" onclick="return goCatPage()"
			title="分类管理" class="special">分类管理</a> <a
			href="javascript:void(0)" onclick="hideCatDiv()" title="隐藏"
			class="special"><<</a> </span>
		<span><font color="red">*</font></span>
	</td>
</tr>


2、js
addCategory:
  function addCategory()
  {
      var parent_id = document.forms['theForm'].elements['cat_id'];
      var cat = document.forms['theForm'].elements['addedCategoryName'];
      if(cat.value.replace(/^\s+|\s+$/g, '') == '')
      {
          alert(category_cat_not_null);
          return;
      }    
      
      //不能使用$,因为和prototype冲突
      jQuery.ajax({
			   type: "POST",
			   url: "/trade/manager/goods/ajaxAddCategory.jsp",
			   data: "parent_id="+parent_id.value+"&cat_name="+cat.value,
			   success: addCatResponse
			}); 
      
  }


addCatResponse:
 function addCatResponse(response)
  {
			
      var category_add_div = document.getElementById("category_add");
      category_add_div.style.display = 'none';

      response = eval('('+response+')');
      var selCat = document.forms['theForm'].elements['cat_id'];
      var opt = document.createElement("OPTION");
      opt.value = response.cat_id;
      opt.selected = true;
      opt.innerHTML = response.cat_name;
			
			
      //获取子分类的空格数
      var str = selCat.options[selCat.selectedIndex].text;
      var lengOfSpace = str.length - response.cat_name.length;
      if(response.parent_id != "")
      {
          lengOfSpace += 4;
      }
      for (i = 0; i < lengOfSpace; i++)
      {
          opt.innerHTML = '&nbsp;' + opt.innerHTML;
      }

      for (i = 0; i < selCat.length; i++)
      {
          if(selCat.options[i].value == response.parent_id)
          {
              if(i == selCat.length)
              {
                  if (Browser.isIE)
                  {
                      selCat.add(opt);
                  }
                  else
                  {
                      selCat.appendChild(opt);
                  }
              }
              else
              {
                  selCat.insertBefore(opt, selCat.options[i + 1]);
              }
              break;
          }
      }
      return;
  }


3、jsp
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%@page import="com.trade.category.CategoryInfo"%>

<%
	
	//获取参数
	String cat_name = "",parent_id="";
	if(null != request.getParameter("cat_name")){
		cat_name = request.getParameter("cat_name");
		cat_name = new String(cat_name.getBytes("iso-8859-1"),"UTF-8");
	}
	if(null != request.getParameter("parent_id")){
		parent_id = request.getParameter("parent_id");
	}
	
	String user_id = "";
	if(null != session.getAttribute("SESSION_USER_ID")){
		user_id = session.getAttribute("SESSION_USER_ID").toString();
	}
	
	CategoryInfo cInfo = new CategoryInfo();
	int cat_level = cInfo.getParentIdCatLevel(parent_id)+1;
	String cat_id = cInfo.addCategory(cat_name,cat_level,parent_id,user_id);
	
	String result = "{cat_id:'"+cat_id+"',cat_name:'"+cat_name+"',parent_id:'"+parent_id+"'}";
	out.write(result);
%>
  • 大小: 16.1 KB
  • 大小: 17.4 KB
分享到:
评论

相关推荐

    jquery实现输入框点击出现下拉列表树插件代码

    `dtreeck.js`是自定义的JavaScript插件文件,实现了点击输入框后显示下拉列表树的逻辑。这个插件可能包含了以下关键部分: 1. 监听输入框的`focus`事件,当输入框获得焦点时,加载或生成树形结构。 2. 使用jQuery的...

    树形下拉列表框

    在实际开发中,有许多现成的JavaScript库和框架可以帮助快速实现树形下拉列表,如: - **jQuery UI**: 提供了`selectmenu`插件,可以扩展出树形下拉列表功能。 - **Select2**: 虽然主要用于普通的下拉列表,但通过...

    ExtJS下拉列表树控件1

    在创建下拉列表树控件时,我们需要关注以下几个关键点: 1. **数据源**:数据通常以JSON格式存储,包含父节点和子节点信息。例如: ```json [ { "text": "父节点1", "children": [ { "text": "子节点1", ...

    jquery下拉列表树

    jQuery下拉列表树是一种将传统的HTML Select元素与树形结构相结合的插件,通过JavaScript和CSS实现。它不仅具备下拉列表的简洁性,还引入了树状结构的层次感,用户可以展开或折叠节点,逐级查看和选择内容。这种组件...

    jquery实现的下拉列表树插件源码.zip

    JavaScript部分负责将这些元素转换为可交互的下拉列表树。 3. 插件初始化 在页面加载完成后,我们需要调用插件的初始化函数,将元素转化为下拉列表树。这通常通过jQuery的选择器找到元素,然后调用自定义的方法完成...

    ExtJS下拉列表树控件

    要创建一个下拉列表树,我们需要将 `TreePanel` 配置为 `ComboBox` 的 `store`,并且可能还需要自定义 `displayField` 来显示节点的文本。 首先,我们需要导入必要的库和模块: ```javascript Ext.onReady...

    jquery下拉列表树插件代码.zip

    在本文中,我们将深入探讨jQuery下拉列表树插件代码,这是一种用于构建树形结构的下拉选择框的实用工具。这种插件广泛应用于网页设计中,为用户提供更直观、更易于操作的选择体验,尤其在处理层级关系数据时非常有用...

    树形下拉列表 递归实现

    树形下拉列表是一种在用户界面中常见的交互元素,它结合了传统的下拉列表和树状结构的特点,常用于展示层级关系的...通过以上步骤,你可以成功创建一个交互式的树形下拉列表,允许用户方便地浏览和选择层级结构的数据。

    javascript实现无限级级联下拉列表

    在JavaScript编程中,实现无限级联下拉列表是一项常见的需求,尤其在构建多级导航菜单、组织结构或者层级关系的数据展示时。无限级联下拉列表允许用户逐级选择,每一级的选择会影响到下一级的显示内容。下面我们将...

    下拉树形列表

    在IT界,尤其是在前端开发领域,下拉树形列表是一种常见的交互元素,它结合了下拉菜单和树状结构的...在实现时,可以基于现有库进行改造,同时注意性能优化和无障碍设计,以创建出高效且用户体验优秀的下拉树形列表。

    jQuery实现输入框下拉列表树插件代码.zip

    最后,`js`目录下的文件是插件的核心部分,其中的JavaScript代码实现了输入框与下拉列表树的交互逻辑。jQuery库提供了丰富的DOM操作和事件处理方法,使得实现这样的功能变得简单。主要步骤可能包括: 1. 监听输入框...

    angularjs下拉树控件

    在Web开发中,下拉树是一种UI控件,它将传统的下拉列表与树状结构相结合。用户可以展开和折叠节点,就像在普通的树视图中那样,同时也可以通过下拉方式选择一个节点。这种控件常用于展示层级关系的数据,如目录结构...

    jQuery树形插件下拉列表选择框.zip

    《jQuery树形插件下拉列表选择框:深入解析与应用》 在现代网页开发中,用户界面的交互性与用户体验至关重要。jQuery作为一款强大的JavaScript库,为开发者提供了丰富的功能和简便的操作方式,大大简化了复杂的DOM...

    ext js 下拉树

    下拉树(Dropdown Tree)是Ext JS中的一种特殊控件,它结合了下拉列表和树结构的功能,通常用于展示层次化的数据,并让用户从中选择一个或多个项。 下拉树的基本结构由两部分组成:一个文本框和一个关联的下拉面板...

    jQuery实现输入框下拉列表树插件代码

    本文将详细解析"jQuery实现输入框下拉列表树插件代码"的相关知识点,帮助开发者理解并应用这个插件。 首先,我们要明白这个插件的核心功能:在输入框中提供一个树形结构的下拉列表。当用户点击输入框时,一个包含...

    javascript实现在下拉列表中显示多级树形菜单的方法

    通过script标签内的JavaScript代码,根据树形结构数据动态生成下拉列表的选项,并使用TreeSelector对象的方法来实现这一功能。 值得注意的是,上述代码示例中使用了JavaScript ES3的语法,这种方法可能在现代浏览器...

Global site tag (gtag.js) - Google Analytics