问个javascript方面的问题：根据select option项的变换，切换不同的数据项

如题：<tr class="sysdisplay">
            <td width="15%" align="right"><font color="RED" size="2">*</font>股东类别：</td>
            <td width="35%" class="fieldname">
<select name="shareholderType" class="inputtext">
<option value="">请选择...</option>
<option value="1">法人股东</option>
<option value="2" selected="selected">自然人股东</option>
</select>
            </td>
           </tr>
由于法人股东和自然人股东的需要填写项都不一样，所以希望在它的下面<tr><td>的数据项也能跟着变换
比如：
法人的数据项是
 <tr class="sysdisplay">
            <td width="15%" align="right"><font color="RED" size="2">*</font>组织机构代码证号：</td>
            <td class="fieldname" width="35%">
            <html:text name="CIEtpShareholderInfoActionForm" property="ogcdCtfcCd" styleClass="inputtext" onkeydown="dealEnter()"/></td>
            <td width="15%" align="right"><font color="RED" size="2">*</font>公司法人代表名称：</td>
            <td class="fieldname" width="35%">
            <html:text name="CIEtpShareholderInfoActionForm" property="companyCname" styleClass="inputtext" onkeydown="dealEnter()"/></td>
        </tr>
自然人股东的数据项是
<tr class="sysdisplay">
            <td width="15%" align="right"><font color="RED" size="2">*</font>性别：</td>
            <td class="fieldname" width="35%">
                <select name="shareholderSex" class="inputtext">
<option value="">请选择...</option>
<option value="0" selected="selected">不详</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
            </td>
            <td width="15%" align="right"><font color="RED" size="2">*</font>身份证号：</td>
            <td class="fieldname" width="35%"><html:text name="CIEtpShareholderInfoActionForm" property="idCardNumber" styleClass="inputtext" onkeydown="dealEnter()"/></td>
        </tr>....
怎么我的股东类别一边，下面跟着填写项也变动，用js怎么实现，谢谢

解决方案 »

  1.   

    给你个四级联动菜单的例子，你看行不行
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>四级联动菜单 7gz.cn</title>
    </head><body><form name="form1" method="post">
    <select id="s1" name="s1"></select><select id="s2" name="s2"></select><select id="s3" name="s3"></select><select id="s4" name="s4"></select>
    </form>
    <script language="javascript">
    <!--
    function LianDong(arr, sel)
    {
     var me = this;
     this.$ = function(o)
     {
      return document.getElementById(o);
     } this.sub = function (i, pid)
     {
      for (var j=i+1; j<sel.length; j++)
      {
       me.$(sel[j]).length = 0;
       me.$(sel[j]).options[0] = new Option("请选择", "");
      }
      for ( var j = 0; j < arr.length; j++)
      {
       if (arr[j][1] == pid)
       {
        me.$(sel[i+1]).options[me.$(sel[i+1]).length] = new Option(arr[j][2], arr[j][0]);
       }
      }
     } this.init = function()
     {
      me.sub(-1,"root");
      for (var i=0; i<sel.length-1; i++)
      {
       me.$(sel[i]).onchange = function()
       {
        var i;
        for (i=0; me.$(sel[i])!=this; i++);
        me.sub(i, me.$(sel[i]).value);
       }
      }
     } this.init();
    }var array=new Array();
    array[0]=new Array("华南地区","root","华南地区","root");
    array[1]=new Array("华北地区","root","华北地区","root");
    array[2]=new Array("上海","华南地区","上海","华南地区");
    array[3]=new Array("广东","华南地区","广东");
    array[4]=new Array("徐家汇","上海","徐家汇");
    array[5]=new Array("普托","上海","普托");
    array[6]=new Array("广州","广东","广州");
    array[7]=new Array("湛江","广东","湛江");
    array[8]=new Array("湛江1","湛江","湛江1");
    array[9]=new Array("湛江2","湛江","湛江2");
    array[10]=new Array("广州1","广州","广州1");
    array[11]=new Array("广州1","广州2","广州3","广州4");var select = new Array("s1","s2","s3","s4");var liandong=new LianDong(array, select)
    //-->
    </script>
      

  2.   

    http://homepage.yesky.com/236/2478236.shtml
    用jacascript的select的OnChange()事件，把法人股和自然人股东的内容放到不同的div中，根据选择显示不同的div
      

  3.   


    <tr class="sysdisplay"> 
                <td width="15%" align="right"> <font color="RED" size="2">* </font>股东类别： </td> 
                <td width="35%" class="fieldname"> 
    <select id="shareholderType" class="inputtext" onclick="test()"> 
    <option value="">请选择... </option> 
    <option value="1">法人股东 </option> 
    <option value="2" selected="selected">自然人股东 </option> 
    </select> 
    <div id="faren" style="display:none">
    <tr class="sysdisplay"> 
                <td width="15%" align="right"> <font color="RED" size="2">* </font>组织机构代码证号： </td> 
                <td class="fieldname" width="35%"> 
                <html:text name="CIEtpShareholderInfoActionForm" property="ogcdCtfcCd" styleClass="inputtext" onkeydown="dealEnter()"/> </td> 
                <td width="15%" align="right"> <font color="RED" size="2">* </font>公司法人代表名称： </td> 
                <td class="fieldname" width="35%"> 
                <html:text name="CIEtpShareholderInfoActionForm" property="companyCname" styleClass="inputtext" onkeydown="dealEnter()"/> </td> 
            </tr> 
    </div>
    <div id="ziranren" style="display:none">
    <tr class="sysdisplay"> 
                <td width="15%" align="right"> <font color="RED" size="2">* </font>性别： </td> 
                <td class="fieldname" width="35%"> 
                    <select name="shareholderSex" class="inputtext"> 
    <option value="">请选择... </option> 
    <option value="0" selected="selected">不详 </option> 
    <option value="1">男 </option> 
    <option value="2">女 </option> 
    </select> 
                </td> 
                <td width="15%" align="right"> <font color="RED" size="2">* </font>身份证号： </td> 
                <td class="fieldname" width="35%"> <html:text name="CIEtpShareholderInfoActionForm" property="idCardNumber" styleClass="inputtext" onkeydown="dealEnter()"/> </td> 
            </tr>
    </div>function test(){
    var value=document.getElementById("shareholderType").value;
    if(value=="1"){
    document.getElementById("faren").style.display=block;
    document.getElementById("ziranren").style.display=none;
    }else if(value=="2"){
    document.getElementById("faren").style.display=none;
    document.getElementById("ziranren").style.display=block;
    }
    }
    这样就可以实现了。
      

  4.   


    参考下上面的代码，可以用DIV+JS去控制，根据值不同，显示的DIV层也不同，这样就可以了
      

  5.   

    这样照做了但没有效果，可能是我页面本身CSS定义的问题吧，onchange时没有做变换。