用于显示多极联动菜单的内容

cs.js内容如下:


  if (isOnChange == null){
    isOnChange = false;
  }
  cascadeSelect.onchange = function (){
    setupCascadeSelect(this, this.options[this.selectedIndex].value, nodes, true);
  };
  cascadeSelect.getAttr = function (attrName) {
    return this[attrName] ? this[attrName] : this.getAttribute(attrName);
  };
  cascadeSelect.getElementById = function (id) {
    return this.form.elements[id] ? this.form.elements[id]: document.getElementById(id);
  };
  cascadeSelect.setDisplayStyle = function(value) {
    if (!this.multiple){
      this.style.display = value;
    }
    var subElement = this.getElementById(this.getAttr("subElement"));
    if (subElement != undefined){
      subElement.setDisplayStyle = this.setDisplayStyle;
    }
  };
  nodes.getChildNodesByParent = function (parent) {
    var childNodes = new Array();
    if (parent + "" == ""){
      return childNodes;
    }
    for (var i = 0; i < nodes.length; i++){
      if (nodes[i][0] != undefined && nodes[i][0] == parent){
        childNodes[childNodes.length] = nodes[i];
      }
    }
    return childNodes;
  }

  if(!isOnChange){
    cascadeSelect.options.length = 0;
    var defaultText = cascadeSelect.getAttr("defaultText");
    var defaultValue = cascadeSelect.getAttr("defaultValue");
    var selectedValue = cascadeSelect.getAttr("selectedValue");

    if (defaultText != undefined && defaultValue != undefined){
      cascadeSelect.options[cascadeSelect.options.length] = new Option(defaultText, defaultValue);
    }
    var childNodes = nodes.getChildNodesByParent(parent);
    for (var i = 0; i < childNodes.length; i++){
      cascadeSelect.options[cascadeSelect.options.length] = new Option(childNodes[i][1], childNodes[i][2]);
      if (selectedValue != undefined && selectedValue == childNodes[i][2]){
        cascadeSelect.selectedIndex = cascadeSelect.options.length - 1;
      }
    }
  }

  if (cascadeSelect.options.length > 0){
    cascadeSelect.setDisplayStyle("");
    var subElement = cascadeSelect.getElementById(cascadeSelect.getAttr("subElement"));
    if (subElement != undefined){
      setupCascadeSelect(subElement, cascadeSelect.options[cascadeSelect.selectedIndex].value, nodes, false);
    }
  } else {
    cascadeSelect.setDisplayStyle("none");
  }
}

/**
 * 以类的方法实现连动
 */
function CascadeSelect(element, parent, nodes){
  this.form = element.form;
  this.nodes = nodes;
  this.attributes = {
    "subElement"    : "subElement",
    "defaultText"   : "defaultText",
    "defaultValue"  : "defaultValue",
    "selectedValue" : "selectedValue"
  }
  this.build(element, parent, false);
}

CascadeSelect.prototype.getElementById = function (id) {
    return this.form.elements[id] ? this.form.elements[id]: document.getElementById(id);
};

CascadeSelect.prototype.getAttribute = function (element, attrName) {
    return element[attrName] ? element[attrName] : element.getAttribute(attrName);
};

CascadeSelect.prototype.getChildNodesByParent = function (parent) {
    var childNodes = new Array();
    if (parent + "" == ""){
      return childNodes;
    }
    for (var i = 0; i < this.nodes.length; i++){
      if (this.nodes[i][0] != undefined && this.nodes[i][0] == parent){
        childNodes[childNodes.length] = this.nodes[i];
      }
    }
    return childNodes;
  }

CascadeSelect.prototype.setDisplayStyle = function(element, value) {
  var cs = this;
    if (!element.multiple){
      element.style.display = value;
    }
    var subElement = this.getElementById(this.getAttribute(element, this.attributes["subElement"]));
    if (subElement != undefined){
      subElement.setDisplayStyle = function () {cs.setDisplayStyle;}
    }
  };

CascadeSelect.prototype.build = function (element, parent, isOnChange) {
  var cs = this;
  element.onchange = function () {
    cs.build(this, this.options[this.selectedIndex].value, true);
  }
  if(!isOnChange){
    element.options.length = 0;
    var defaultText = this.getAttribute(element, this.attributes["defaultText"]);
    var defaultValue = this.getAttribute(element, this.attributes["defaultValue"]);
    var selectedValue = this.getAttribute(element, this.attributes["selectedValue"]);
 //alert(selectedValue);

    if (defaultText != undefined && defaultValue != undefined){
      element.options[element.options.length] = new Option(defaultText, defaultValue);
    }
    var childNodes = this.getChildNodesByParent(parent);
    for (var i = 0; i < childNodes.length; i++){
      element.options[element.options.length] = new Option(childNodes[i][1], childNodes[i][2]);
   //alert("childNodes[i][2]:" + childNodes[i][2]);
      if (selectedValue != undefined && selectedValue == childNodes[i][2]){
  alert(selectedValue);
        element.selectedIndex = element.options.length - 1;
      }
    }
  }

  if (element.options.length > 0){
    this.setDisplayStyle(element, "");
    var subElement = this.getElementById(this.getAttribute(element, this.attributes["subElement"]));
    if (subElement != undefined){
      this.build(subElement, element.options[element.selectedIndex].value, false);
    }
  } else {
    this.setDisplayStyle(element, "none");
  }
}
//-->

测试的例子如下:(包含狂多的数据,到时候一定不实用,那些开发人员一定受不了)




Select联系演示程序





 
 

 
 

 
 

 
 






本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部