根据下拉框选择隐藏/显示表格

有没有关于如何选择显示/隐藏表单或文本框的任何教程。

我有像这个下拉框（添加，项目1，项目2，项目3等..）

如果加选择显示出表格添加一些属性，如（姓，名ECT添加..）否则它只会对选定的项目执行操作。

2012-10-19 deep

切换面板的可见性？ – IrishChieftain

<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没有安装任何的软件，未经测试。

来源

2012-10-20 03:29:56

嘿，这个工程很好，除了一个错误，只要页面加载所有div的显示。例如，如果我的选项1在页面上启动，则textboxclass和someform都可见，只有一个应该是。 – deep

添加显示：你的CSS中没有你喜欢隐藏的所有div –

我会在客户端代码中连线。在JavaScript或jQuery中处理select的onchange事件，并将处理程序绑定到它。由于“加”是唯一一个将显示表格的工具，请在您的处理程序中检查所选值，如果它是“Add”的值，则显示表格。如果是其他值，请隐藏表单。

如果您想在服务器代码中执行此操作，只需处理更改选定内容的事件并以此方式设置窗体的可见性属性即可。无论哪种方式都应该很容易。

在客户端执行此操作可以避免编写回发代码，同时消除处理服务器请求的责任。

来源

2012-10-19 21:05:12 Yatrix

，如果你想从服务器端做到这一点，你需要设置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做到这一点

来源

2012-10-20 07:50:31

根据下拉框选择隐藏/显示表格

回答

相关问题