BlogJava-自反而缩,虽千万人吾往矣!-文章分类-javascripthttp://www.blogjava.net/yxw820816/category/17821.htmlzh-cnMon, 09 Apr 2007 20:14:50 GMTMon, 09 Apr 2007 20:14:50 GMT60下拉菜单联动http://www.blogjava.net/yxw820816/articles/84312.htmlyxwyxwWed, 29 Nov 2006 03:41:00 GMThttp://www.blogjava.net/yxw820816/articles/84312.htmlhttp://www.blogjava.net/yxw820816/comments/84312.htmlhttp://www.blogjava.net/yxw820816/articles/84312.html#Feedback0http://www.blogjava.net/yxw820816/comments/commentRss/84312.htmlhttp://www.blogjava.net/yxw820816/services/trackbacks/84312.html--------------------------------------------------------------------
在网上找到的代码，现在正在用，一定可以用。稍加改动，可以从数据库取数据进行联动，认为比较经典。
<html>
 <head>
  <title>JS联动下拉框</title>
  <script language="javascript" >
  /* 
**    ================================================================================================== 
**    类名：CLASS_LIANDONG_YAO 
**    功能：多级连动菜单 
**   
**    作者：YAODAYIZI 

**    ================================================================================================== 
**/   
  function CLASS_LIANDONG_YAO(array)
  {
   //数组，联动的数据源
   this.array=array;
   this.indexName='';
   this.obj='';
   //设置子SELECT
 // 参数：当前onchange的SELECT ID，要设置的SELECT ID
      this.subSelectChange=function(selectName1,selectName2)
   {
   //try
   //{
    var obj1=document.all[selectName1];
    var obj2=document.all[selectName2];
    var objName=this.toString();
    var me=this;
 
    obj1.onchange=function()
    {
     
     me.optionChange(this.options[this.selectedIndex].value,obj2.id)
    }

   }
   //设置第一个SELECT
 // 参数：indexName指选中项,selectName指select的ID
   this.firstSelectChange=function(indexName,selectName) 
   {
   this.obj=document.all[selectName];
   this.indexName=indexName;
   this.optionChange(this.indexName,this.obj.id)

   }
 
  // indexName指选中项,selectName指select的ID
   this.optionChange=function (indexName,selectName)
   {
    var obj1=document.all[selectName];
    var me=this;
    obj1.length=0;
    obj1.options[0]=new Option("请选择",'');
    for(var i=0;i<this.array.length;i++)
    { 
   
     if(this.array[i][1]==indexName)
     {
     //alert(this.array[i][1]+" "+indexName);
      obj1.options[obj1.length]=new Option(this.array[i][2],this.array[i][0]);
     }
    }
   }
   
  }
  </script>
 </head>
 <body>
  <form name="form1" method="post">
   &nbsp;
   <SELECT ID="s1" NAME="s1"  >
    <OPTION selected></OPTION>
   </SELECT>
   <SELECT ID="s2" NAME="s2"  >
    <OPTION selected></OPTION>
   </SELECT>
   <SELECT ID="s3" NAME="s3">
    <OPTION selected></OPTION>
   </SELECT>
   <br>
   <br><br>
   <SELECT ID="x1" NAME="x1"  >
    <OPTION selected></OPTION>
   </SELECT>
   <SELECT ID="x2" NAME="x2"  >
    <OPTION selected></OPTION>
   </SELECT>
   <SELECT ID="x3" NAME="x3">
    <OPTION selected></OPTION>
   </SELECT>
   <SELECT ID="x4" NAME="x4">
    <OPTION selected></OPTION>
   </SELECT>
   <SELECT ID="x5" NAME="x5">
    <OPTION selected></OPTION>
   </SELECT>
   
  </form>
 </body>

 
 
 <script language="javascript">
 //例子1-------------------------------------------------------------
 //数据源
  var array=new Array();
  array[0]=new Array("华南地区","根目录","华南地区"); //数据格式 ID，父级ID，名称
  array[1]=new Array("华北地区","根目录","华北地区");
  array[2]=new Array("上海","华南地区","上海");
  array[3]=new Array("广东","华南地区","广东");
  array[4]=new Array("徐家汇","上海","徐家汇");
  array[5]=new Array("普托","上海","普托"); 
  array[6]=new Array("广州","广东","广州");
  array[7]=new Array("湛江","广东","湛江");
  //--------------------------------------------
  //这是调用代码
  var liandong=new CLASS_LIANDONG_YAO(array) //设置数据源
  liandong.firstSelectChange("根目录","s1"); //设置第一个选择框
  liandong.subSelectChange("s1","s2"); //设置子级选择框
  liandong.subSelectChange("s2","s3");
 
 
 //例子2-------------------------------------------------------------
 //数据源 
  var array2=new Array();//数据格式 ID，父级ID，名称
  array2[0]=new Array("测试测试","根目录","测试测试");
  array2[1]=new Array("华北地区","根目录","华北地区");
  array2[2]=new Array("上海","测试测试","上海");
  array2[3]=new Array("广东","测试测试","广东");
  array2[4]=new Array("徐家汇","上海","徐家汇");
  array2[5]=new Array("普托","上海","普托"); 
  array2[6]=new Array("广州","广东","广州");
  array2[7]=new Array("湛江","广东","湛江");
  array2[8]=new Array("不知道","湛江","不知道");
  array2[9]=new Array("5555","湛江","555");
  array2[10]=new Array("++++","不知道","++++");
  array2[11]=new Array("111","徐家汇","111");
  array2[12]=new Array("222","111","222");
  array2[13]=new Array("333","222","333");
  //--------------------------------------------
  //这是调用代码
  //设置数据源
  var liandong2=new CLASS_LIANDONG_YAO(array2);
  //设置第一个选择框
  liandong2.firstSelectChange("根目录","x1");
  //设置子选择框
  liandong2.subSelectChange("x1","x2")
  liandong2.subSelectChange("x2","x3")
  liandong2.subSelectChange("x3","x4")
  liandong2.subSelectChange("x4","x5")
 </script>
</html>
-----------------------------------------------------------------

注：只要把var array=new Array();的值改为从数据库中取到的值可以和数据库连接。例子如下。可以仿照进行更改
<script language="javascript">
//数据源
  var array=new Array();
 <%
 int count = 0;
String bm_id="",bm_name="",yh_id="",yh_name="";
behdResultSet rs1=null,rs2=null;
String s1=null,s2=null;
s1="select dept_id,dept_name from scm_dept001";
s2="select dept_id,user_id,user_name from scm_user001 where dept_id!=' ' and dept_id!='null'";
 rs1 = mdb.executeQueryForPage(s1,1,100);//读取数据
while(rs1.next())
{
 bm_id=rs1.getString("dept_id");
 bm_name=rs1.getString("dept_name");
%>
array[<%=count%>] = new Array("<%=bm_id%>","根目录","<%=bm_id%>-<%=bm_name%>");//产生数组
<%
        count = count + 1;
}
rs2=mdb.executeQueryForPage(s2,1,100);
while(rs2.next()){
 yh_id=rs2.getString("user_id");
 if(yh_id==null){
  yh_id="";
  }
 bm_id=rs2.getString("dept_id");
 if(bm_id==null){
  bm_id="";
  }
 yh_name=rs2.getString("user_name");
 if(yh_name==null){
  yh_name="";
  }

%>
array[<%=count%>] = new Array("<%=yh_id%>","<%=bm_id%>","<%=yh_id%>-<%=yh_name%>");
<%
 count = count + 1;
}
%>
  //--------------------------------------------
  //这是调用代码
  var liandong=new CLASS_LIANDONG_YAO(array) //设置数据源
  liandong.firstSelectChange("根目录","s1"); //设置第一个选择框
  liandong.subSelectChange("s1","s2"); //设置子级选择框
 </script>



yxw 2006-11-29 11:41 发表评论
]]>下拉列表和文本框的联动http://www.blogjava.net/yxw820816/articles/84109.htmlyxwyxwTue, 28 Nov 2006 09:51:00 GMThttp://www.blogjava.net/yxw820816/articles/84109.htmlhttp://www.blogjava.net/yxw820816/comments/84109.htmlhttp://www.blogjava.net/yxw820816/articles/84109.html#Feedback0http://www.blogjava.net/yxw820816/comments/commentRss/84109.htmlhttp://www.blogjava.net/yxw820816/services/trackbacks/84109.html<html>
<title></title>
<head>
<script language="JavaScript" type="text/JavaScript">
function x1(is)
{

var xx=new Array(new Array("HTTP","http://"),
    new Array("HTTPS","https://"),new Array("MMS","mms://"),new Array("RTSP","rtsp://"),
    new Array("P2SP","p2sp://"),new Array("FTP","ftp://"));

if (is=="")
{
  document.getElementById("channel_name").value="";
 
}
else
{
 for(i=0;i<xx.length;i++)
 {

   if (xx[i][0]==is)
   {
   document.getElementById("channel_name").value=xx[i][1];
   break;
   }
  
 }
 
}
}
</script>

</head>

<body>


<select name='channel_type' size=1 id="dd" onChange="x1(this.options[this.selectedIndex].value)">
              <option selected value='HTTP'>HTTP</option>
              <option  value='HTTPS'>HTTPS</option>
              <option  value='MMS'>MMS</option>
              <option  value='RTSP'>RTSP</option>
              <option  value='P2SP'>P2SP</option>
              <option  value='FTP'>FTP</option>
              </select>
              <input type="text" name="channel_name"  id="channel_name">

</body>
</html>



yxw 2006-11-28 17:51 发表评论
]]>隐藏trhttp://www.blogjava.net/yxw820816/articles/84099.htmlyxwyxwTue, 28 Nov 2006 09:24:00 GMThttp://www.blogjava.net/yxw820816/articles/84099.htmlhttp://www.blogjava.net/yxw820816/comments/84099.htmlhttp://www.blogjava.net/yxw820816/articles/84099.html#Feedback0http://www.blogjava.net/yxw820816/comments/commentRss/84099.htmlhttp://www.blogjava.net/yxw820816/services/trackbacks/84099.html<html>
<head>
<title>测试</title>
</head>
<body>
<form name="form1" method="get" action="">
        <table width="70%" border="1" cellspacing=0>
          <tr>
            <td >是否刷新squid</td>
            <td>
              使用
              <input type="radio" name="refresh_flag4" value="1" onclick="tr_1.style.display=''">
              &nbsp;&nbsp;&nbsp;
              不用
              <input type="radio" name="refresh_flag4" value="0" checked onclick="tr_1.style.display='none'">
            </td>
          </tr>

 <tr  id=tr_1>
        <td width="32%" bgcolor="#CCCCCC" height="32">squid设备类型</td>
        <td ><input type='radio' name='squid_ref_flag'  value='1' >测试</td>
        <td ><input type='radio' name='squid_ref_flag'  value='2' >测试</td>
 </tr>
</table>
</form>
</body>
<script language="javascript" type="text/JavaScript">
function checksquidflag()
{
  var obj = document.all("squid_ref_flag");
  //alert(obj);
  if(document.form1.refresh_flag4[1].checked){
      if(obj){
          for(i=0;i<obj.length; i++){
              obj[i].disabled = false;
              }
               obj[0].checked=true;
      }
  }
}
function init()
{
document.all["tr_1"].style.display="none";
}
init();
checksquidflag();
</script>
</html>



yxw 2006-11-28 17:24 发表评论
]]>