1. 程式人生 > >JS+Html控制控制元件的顯示與隱藏

JS+Html控制控制元件的顯示與隱藏

有一個需求是利用一個button按鈕,控制另一個控制元件的顯示與隱藏

點選加號可以新增一個監考,點選減號可以去掉一個監考。

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";
                <span style="color:#FF0000;">document.getElementById("tasklist_originalno").value = "";</span>

                /*上面紅色的這句話用處很大的,因為你想隱藏掉下面的一個表單,那麼這個表單的值也就不需要寫入資料庫了,所以記得在隱藏的同時將被隱藏表單的值清空;當然要是你不嫌麻煩的話在表單的資料提交到php的資料處理頁面的時候對 tasklist_type根據其值是0還是1來行進判斷寫不寫入 tasklist_originalno 的值 */
            }
            if (tasklist_type.options[i].value == 1) {
                document.getElementById("tasklistoriginalno").style.display = "";
            }
        }
    }

}

views程式碼
<tr height='30'>
                 <td>bt : </td>
                 <td>
                    <select name="tasklist_type" id="tasklist_type"  onchange="listchange();return false;">
                        <option value="null" >1</option>
                        <option value="0" >2</option>
                        <option value="1" >3</option>
                    </select>
                </td>
             </tr>
             <tr height='30'  id='tasklistoriginalno'>
               <td>bt2:</td>
               <td colspan='3'><input type='text'  id='tasklist_originalno' name='tasklist_originalno'/></td>
             </tr>

        這個還不是最佳的解決方法,在頁面新載入的時候,只有主監考一條資訊,隱藏的資訊不會被儲存到資料庫中,當點選新增的時候顯示隱藏資訊,但是這樣的操作,隱藏資訊都是佔用空間的。

       如何做才能隱藏不佔空間,顯示才在頁面上佔空間???

知識點:在html中屬性visibility的hidden 和 visible也可以做到控制隱藏和顯示。

           。。。