改进过的一个联动控件,使用更加简单方便

来源:互联网 发布:js高手进阶之路 编辑:程序博客网 时间:2024/05/30 04:54

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>改进过的一个联动控件,使用更加简单方便</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="iuhxq,qq:4111852,http://blog.csdn.net/iuhxq">
<meta name="Keywords" content="联动">
<meta name="Description" content="改进过的一个联动控件,使用更加简单方便">
</head>

<body>
<table>
<tr>
 <td>1</td>
 <td>2</td>
 <td>3</td>
</tr>
<tr>
 <td><span id="select1"></span></td>
 <td><input type="button" value="设置值" onclick="liandong.SetValue(1,3,7,13,16,18);"></td>
 <td><input type="button" value="取值" onclick="alert(liandong.GetValue());"></td>
</tr>
<tr>
 <td>4</td>
 <td>5</td>
 <td>6</td>
</tr>
</table>

<script language="JavaScript">
<!--
function LianDong(arr, sel, value)
{
 sel = document.getElementById(sel);

 this.sub = function (i,pid)
 {
  while(sel.childNodes.length-1>=i)
  {
   sel.removeChild(sel.childNodes[sel.childNodes.length-1]);
  }
  var tmp;
  var created = false;
  for ( var j = 0; j < arr.length; j++)
  {
   if (arr[j][1] == pid)
   {
    if (created==false)
    {
     created = true;
       tmp = document.createElement("select");
       tmp.setAttribute("id", "liandong_" + i);
       //tmp.setAttribute("multiple", "multiple");
       tmp.options[tmp.length] = new Option("请选择", "-1");
       tmp.onchange = function()
       {
      p(parseInt(tmp.getAttribute("id").replace("liandong_",""))+1,tmp.value);
       };
       sel.appendChild(tmp);
    }
    tmp.options[tmp.options.length] = new Option(arr[j][2], arr[j][0]);
   }
  }
 }
 var p = this.sub;
 this.SetValue = function()
 {
  for (var i=0; i<arguments.length; i++)
  {
   sel.childNodes[i].value = arguments[i];
   this.sub(i+1, arguments[i]);
  }
 }

 this.GetValue = function()
 {
  var value = "";
  for (var i=0; i<sel.childNodes.length; i++)
  {
   var obj = sel.childNodes[i];
   for (var j=0; j<obj.options.length; j++)
   {
    if (obj.options[j].selected)
    {
     value += obj.options[j].value + ",";
     break;
    }
   }
  }
  return value;
 }

 this.sub(0,0);
}

//利用ASP,ASP.NET,PHP等语言输出下边数据和liandong定义即可
var array=new Array();
//array[索引] = new Array("当前ID", "父ID", "名称");
array[0] = new Array("1", "0", "1");
array[1] = new Array("2", "0", "2");
array[2] = new Array("3", "1", "1,3");
array[3] = new Array("4", "1", "1,4");
array[4] = new Array("5", "2", "2,5");
array[5] = new Array("6", "2", "2,6");
array[6] = new Array("7", "3", "3,7");
array[7] = new Array("8", "3", "3,8");
array[8] = new Array("9", "3", "3,9");
array[9] = new Array("10", "1", "1,10");
array[10] = new Array("11", "1", "1,11");
array[11] = new Array("12", "2", "2,12");
array[12] = new Array("13", "7", "7,13");
array[13] = new Array("15", "7", "7,14");
array[14] = new Array("16", "13", "13,16");
array[15] = new Array("17", "13", "13,17");
array[16] = new Array("18", "16", "16,18");
array[17] = new Array("19", "10", "10,19");

//var liandong = new LianDong(数据, 显示容器的ID),该定义最好放在window.onload里运行。
var liandong = new LianDong(array, "select1")

//-->
</script>
</body>
</html>