posts - 9, comments - 5, trackbacks - 0, articles - 2
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

[导入]JavaScript 三级级联菜单

Posted on 2007-11-10 17:21 代林 阅读(301) 评论(0)  编辑  收藏

2005 年的时候帮人收集整理修改的一份脚本级联菜单, 没用到 AJAX, 写死的数据. 效果自己试试就知道了. 支持主流浏览器. 自己现在看看这代码就觉得头大... 呵呵 脚本就是脚本啊. 一段时间放下就看不懂了.

<HTML>
<HEAD>
<TITLE>合同申请</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<SCRIPT LANGUAGE = JavaScript>
/** Define object Dsy 构造器
fieldValues - 三个表单域的名称, 可以通过 request.getParameter(xxx) 取值
defalutOptions - 默认选项
*/
function Dsy(fieldValues, defalutOptions){
  this.Items = {};
  this.defalutOptions = defalutOptions;// 默认选项 
  this.fieldValues = fieldValues;// 三个表单域的名称
}

Dsy.prototype.add = function(id, iArray){
  this.Items[id] = iArray;
}

Dsy.prototype.Exists = function(id){
  if (typeof(this.Items[id]) == "undefined")
    return false;
  return true;
};

Dsy.prototype.setup = function() {
    this.bean_change(0);
}

// This prototype method added by BeanSoft Studio
Dsy.prototype.bean_change = function(v){
  var str = "0";
  for (i = 0; i < v; i++){
    str += ("_" + (document.getElementById(this.fieldValues[i]).selectedIndex - 1));
  };

  var ss = document.getElementById(this.fieldValues[v]);
  // Avoid a null exception
  if(ss == null) return;

    with(ss){
      length = 0;
      options[0] = new Option(this.defalutOptions[v], this.defalutOptions[v]);
      if (v && document.getElementById(this.fieldValues[v - 1]).selectedIndex > 0 || !v){
        if (this.Exists(str)){
          array = this.Items[str];
          for (i = 0; i < array.length; i++)
            options[length] = new Option(array[i], array[i]);
          if (v)
            options[1].selected = true;
        }
      }

      if (++v < s.length){
        this.bean_change(v);
      }
    }
}

  function change(v){   
    dsy.bean_change(v);// Call test prototype
  }

  // Write form data string, 输出表单脚本代码
  // dsy, object name
  // varName, 变量名
  function toString(dsy, varName) {
    var str = "";
    for(i = 0; i < dsy.fieldValues.length; i++) {
        str += "<select id=\"" + dsy.fieldValues[i] + "\" onChange=\"" + varName + ".bean_change(" + (i + 1)
            + ");\"></select>\r\n";
    }
    str += "<br/>";
    return str;
  }

// 第一个对象
  var dsy = new Dsy(["s1", "s2", "s3"], ["销售方名称", "销售方联系人", "联系电话"]);
  var dsy1 = new Dsy(["s4", "s5", "s6"],  ["最终用户名称", "最终用户联系人", "联系电话"]);
  var dsy2 = new Dsy(s = ["s7", "s8", "s9"], ["厂商", "厂商销售", "联系电话"]);

// 填入数据, 重复的代码
  dsy.add("0", ["单位1", "单位2"]);

  dsy.add("0_0", ["单位1联系人_1", "单位1联系人_2"]);
  dsy.add("0_0_0", ["单位1联系人_1联系电话"]);
  dsy.add("0_0_1", ["单位1联系人_2联系电话"]);

  dsy.add("0_1", ["单位2联系人_1", "单位2联系人_2"]);
  dsy.add("0_1_0", ["单位2联系人_1联系电话"]);
  dsy.add("0_1_1", ["单位2联系人_2联系电话"]);

  dsy1.add("0", ["最终用户1", "最终用户2"]);

  dsy1.add("0_0", ["最终用户1_联系人1", "最终用户1_联系人2"]);
  dsy1.add("0_0_0", ["最终用户1_联系人1_电话"]);
  dsy1.add("0_0_1", ["最终用户1_联系人2_电话"]);

  dsy1.add("0_1", ["最终用户2_联系人1", "最终用户2_联系人2"]);
  dsy1.add("0_1_0", ["最终用户2_联系人1_电话"]);
  dsy1.add("0_1_1", ["最终用户2_联系人2_电话"]);

  dsy2.add("0", ["BEA", "Horizon"]);

  dsy2.add("0_0", ["张学友", "BeanSoft"]);
  dsy2.add("0_0_0", ["1234567890"]);
  dsy2.add("0_0_1", ["beansoft@126.com"]);

  dsy2.add("0_1", ["AAA", "BBB"]);
  dsy2.add("0_1_0", ["AAA_99999"]);
  dsy2.add("0_1_1", ["bbb_88888"]);

  function setup(){  // Initialize the object
    dsy.setup(); //依次调用 setup
    dsy1.setup();
    dsy2.setup();
  }

function prints1(){
    alert(document.frm.s1.value + " " + document.frm.s2.value + " " + document.frm.s3.value +"\r\n");
}

//isNaN()检查运算结果  http://tech.ccidnet.com/pub/article/c1115_a120997_p1.html

</SCRIPT>

</head>
<body bgcolor="#E0E0E0" onload="setup()">
多级关联菜单:
<form name="frm">

<!-- 方式1: 手工输出 HTML 代码, 便于排版
<select id="s1" onChange="dsy.bean_change(1);"></select>
<select id="s2" onChange="dsy.bean_change(2);"></select>
<select id="s3" onChange="dsy.bean_change(3);"></select>
<br>
<br>
<br>
<select id="s4" onChange="dsy1.bean_change(1);"></select>
<select id="s5" onChange="dsy1.bean_change(2);"></select>
<select id="s6" onChange="dsy1.bean_change(3);"></select>
<br>
<br>
<br>
<select id="s7" onChange="dsy2.bean_change(1);"></select>
<select id="s8" onChange="dsy2.bean_change(2);"></select>
<select id="s9" onChange="dsy2.bean_change(3);"></select>
-->
<SCRIPT LANGUAGE="JavaScript">
<!--
// 方式2: 脚本输出表单 HTML 代码, 代码和上面注释掉的类似
document.write(toString(dsy, "dsy"));
document.write(toString(dsy1, "dsy1"));
document.write(toString(dsy2, "dsy2"));
//-->
</SCRIPT>

<input type=button name=b1 value="监测" onclick="prints1()">

</form>

</body>
</html>



BeanSoft 2007-10-22 10:43 发表评论

文章来源:http://www.blogjava.net/beansoft/archive/2007/10/22/154898.html

只有注册用户登录后才能发表评论。


网站导航: