2012-10-19 167 views
2

我環顧四周,沒有找到任何具體的東西。根據下拉框選擇隱藏/顯示錶格

有沒有關於如何選擇顯示/隱藏表單或文本框的任何教程。

我有像這個下拉框(添加,項目1,項目2,項目3等..)

如果加選擇顯示出表格添加一些屬性,如(姓,名ECT添加..)否則它只會對選定的項目執行操作。

+0

切換面板的可見性? – IrishChieftain

回答

0
<select id="target"> 
    <option value="option1" selected="selected">Add</option> 
    <option value="option2">Item1</option> 
    </select> 

<input type="text" class="textboxclass" /> 

<div class="someform"> 
//content 
</div> 

爲someform類默認CSS顯示屬性是沒有如:

.someform{display:none;} 

jQuery腳本

<script> 
$('#target').change(function() { 
    var name = $('#target option:selected'),text(); //Item1 
    var id = $('#target').val(); // option2 

    if(id =="option2"){ 
    //your logic for this option 
    //hide textbox 
    $('.textboxclass').hide(); 
    $('.someform').show(); 
    }else{ 
    $('.textboxclass').show(); 
    $('.someform').hide(); 

} 
    //other if else logic 

}); 
</script> 

,因爲筆記本電腦的IM沒有安裝任何的軟件,未經測試。

+0

嘿,這個工程很好,除了一個錯誤,只要頁面加載所有div的顯示。例如,如果我的選項1在頁面上啓動,則textboxclass和someform都可見,只有一個應該是。 – deep

+0

添加顯示:你的CSS中沒有你喜歡隱藏的所有div –

0

我會在客戶端代碼中連線。在JavaScript或jQuery中處理select的onchange事件,並將處理程序綁定到它。由於「」是唯一一個將顯示錶格的工具,請在您的處理程序中檢查所選值,如果它是「Add」的值,則顯示錶格。如果是其他值,請隱藏表單。

如果您想在服務器代碼中執行此操作,只需處理更改選定內容的事件並以此方式設置窗體的可見性屬性即可。無論哪種方式都應該很容易。

在客戶端執行此操作可以避免編寫回發代碼,同時消除處理服務器請求的責任。

0

,如果你想從服務器端做到這一點,你需要設置DrowpDown列表真正的將AutoPostBack propetry,

,並在下拉列表的SelectedIndexChanged事件

試試這個,

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) 
{ 
    if (DropDownList1.SelectedIndex == 0) 
    { 
     entryForm.Visible = true; 
     viewForm.Visible = false; 
    } 
    else if (DropDownList1.SelectedIndex == 1) 
    { 
     entryForm.Visible = false; 
     viewForm.Visible = true; 

} 

但這不是一個好的方法,我會建議遵循上面給出的答案,並使用JavaScript或JQuery做到這一點

相關問題