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

阿新 • • 發佈：2019-01-19

文章一：

無論是事先寫好的，還是動態生成的，要找到指定的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：

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

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

下面是測試的例子，也是我在網上看到的，我們將其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>

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

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

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

AngularJS 中，通過 radio來控制元素的顯示和隱藏，以及控制表單元素的 disabled

控制窗體的顯示和隱藏

jQuery---用jq實現控制元件的顯示和隱藏

擴充套件EasyUI datagrid 增加表頭右鍵選單功能，可動態對列進行顯示和隱藏

CSS控制DIV層顯示和隱藏的實現方法

Android 動畫1--View控制元件的顯示和隱藏效果

JS動態生成表單，並新增行雙擊事件

通過hover簡單控制盒子的顯示和隱藏

個人筆記 js 02 控制div的顯示及隱藏（js控制iframe的顯示及隱藏）

JS控制HTML元素的顯示和隱藏

[Swift通天遁地]二、表格表單-(13)實時調整表單元素的顯示和隱藏

用JQuery+CSS實現form表單的顯示和隱藏

js控制顯示和隱藏 jquery賦值與新增事件

Asp.net 動態控制GridView列的顯示和隱藏

JS 獲取和設定input值,控制表單提交地址

Android動態控制狀態列以及系統導航欄顯示和隱藏

js控制文字字數，並能點選顯示和隱藏

安卓（Android ）軟鍵盤的控制（顯示和隱藏）

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

相關推薦