js動態控制表單的顯示和隱藏

zhengqiqiqinqin發表於2013-10-09
JS

文章一：

無論是事先寫好的，還是動態生成的，要找到指定的tr或td都必須知道其相關的一個屬性，未必必須是id或name，然後無論是在一個table還是多個 table都可以通過document.getElementsByTagNames( "tr ")或td，取得集合，……再根據知道的屬性再找，最後設定顯示/隱藏

 

方法一： 
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>

 

 

 

---------------------------------------------------------------------------------------------

上面的程式碼在IE6和FF下都能成功實現效果，但是在IE8下不能得到相應的效果，原因出在在IE8下用上面的程式碼無法獲取到下拉選單的值，經測試下面的程式碼可以：

js

function listchange()
{    
    var sel=document.getElementsByName("tasklist_type")[0].value; //獲取下拉表單的value值
    
    if(sel=='0')
     {
          document.getElementById( "tasklistoriginalno").style.display= "none"; //隱藏id為tasklistoriginalno的td
          document.getElementById("tasklist_originalno").value = ""; //並將其值賦為空
     }
                
    if(sel=='1')
     {
         document.getElementById( "tasklistoriginalno").style.display= ""; //當下拉表單的值為0時顯示
     } 
}

 

 

 

下面是測試的例子，也是我在網上看到的，我們將其copy到儲存到一個html頁面中在IE8下開啟，OK：

<!--有表單---->

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
  </head>
  <script type="text/javascript">
      function optChange(){
        var name=document.areaName.area.options[document.areaName.area.selectedIndex].text;
        alert(name);
      }
  </script>
  <body>
    <form name="areaName">
    <select name="area" onchange="optChange()">
     <option  value="上海">上海</option>
     <option value="南京">南京</option>
     <option value="北京">北京</option>
     <option value="成都">成都</option>
     <option value="長沙">長沙</option>
     <option value="山西">山西</option>
    </select>
    </form>
  </body>
</html>

<!---無表單--->



<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
  </head>
  <script type="text/javascript">
      function optChange(){
       var name=document.getElementsByName("area")[0].value; 
        alert(name);
      }
  </script>
  <body>
    <select name="area" onchange="optChange()">
     <option  value="上海">上海</option>
     <option value="南京">南京</option>
     <option value="北京">北京</option>
     <option value="成都">成都</option>
     <option value="長沙">長沙</option>
     <option value="山西">山西</option>
    </select>
  </body>
</html >


文章二：

<input type=radio name=aa value=yes onclick=bb.style.display='none'>yes
<input type=radio name=aa value=no onclick=bb.style.display='block'>no<br>
<div id=bb style=display:none><input type=text name=cc></div><br>
<input type=button value=submit>

我把程式碼稍稍改動了一點，實際效果如下，主要是標準問題。

 顯示  不顯示

<script type="text/javascript">
function show(){
	document.getElementById("test").style.display = "block";
}
function hide(){
	document.getElementById("test").style.display = "none";
}
</script>
<input type="radio" name="group1" value="yes" onchange="show()" />顯示
<input type="radio" name="group1" value="no" onchange="hide()" />不顯示
<div id="test" style="display:none">
	<input type="text" />
</div>




相關文章