方法一： 
document.getElementById( "控件ID ").style.visibility= "hidden "; 
document.getElementById( "控件ID ").style.visibility= "visible "; 
方法二： 
document.getElementById( "控件ID ").style.display= "none "; 
document.getElementById( "控件ID ").style.display= "inline "; 
方法一隐藏后   页面的位置还被控件占用   只是不显示   类似于.net验证控件的Display=Static 
方法二隐藏后   页面的位置不被占用   类似于.net验证控件的Display=Dynamic

我写的一个根据下拉菜单的不同选择值来显示下边的一个input表单的显示和隐藏

js：

function listchange(){
    
    var sel=document.getElementsByName('tasklist_type');
    for(var i=0;i<tasklist_type.options.length;i++)
    {
     if(tasklist_type.options[i].selected)
     {
      if(tasklist_type.options[i].value==0){
        document.getElementById( "tasklistoriginalno").style.display= "none";
        document.getElementById("tasklist_originalno").value = "";

/*上面红色的这句话用处很大的，因为你想隐藏掉下面的一个表单，那么这个表单的值也就不需要写入数据库了，所以记得在隐藏的同时将被隐藏表单的值清空；当然要是你不嫌麻烦的话在表单的数据提交到php的数据处理页面的时候对 tasklist_type根据其值是0还是1来行进判断写不写入tasklist_originalno 的值 */
      }
      if(tasklist_type.options[i].value==1){
        document.getElementById( "tasklistoriginalno").style.display= "";
      }
     }
    }
     
}

html：

                <tr height='30'>
                 <td>&nbsp;<{$lang_tasklist_type}>: </td>
                 <td>
                    <select name="tasklist_type" id="tasklist_type"  onchange="listchange();return false;">
                        <option value="null" ><{$lang_tasklist_sel}></option>
                        <option value="0" ><{$lang_tasklist_common}></option>
                        <option value="1" ><{$lang_tasklist_supplement}></option>
                    </select>
                </td>
             </tr>
             <tr height='30'  id='tasklistoriginalno'>
               <td>&nbsp;<{$lang_tasklist_originalno}>:</td>
               <td colspan='3'><input type='text'  id='tasklist_originalno' name='tasklist_originalno'/></td>
             </tr>