如何使用dropdownlistfor显示和隐藏div? [英] how can i show and hide div using dropdownlistfor ?

问题描述

在我的代码中
在视野中
@ Html.DropDownListFor(model => model.ddlParentId，Model.ParentValue，>>选择任何父对象<<<"))
在此下拉列表中，我已从数据库中选择数据为

公共列表< SelectListItem> GetStateName()
{
var vStateName =(来自param.DTypes中的tblState
选择新的SelectListItem
{

文字= tblState.DataType，
值= tblState.DataId.ToString()
});

返回vStateName.ToList();

}
现在我要做的是
根据下拉列表中选择的值，我必须更改div
我该怎么办?
请给我建议?

in my code
in view
@Html.DropDownListFor(model=>model.ddlParentId,Model.ParentValue,">>Select Any Parent<<")
in this dropdownlistfor i have selected the data from database as

public List<SelectListItem> GetStateName()
{
var vStateName = (from tblState in param.DTypes
select new SelectListItem
{

Text =tblState.DataType,
Value = tblState.DataId.ToString()
});

return vStateName.ToList();

}
now what i have to do is
according to the selected value in dropdownlist i have to change the div
how can i do ?
plz suggest me ?

推荐答案

您可以像这样......

1)首先贴花两个css calss，就像这样...

you can go for it like this...

1) first of all decalre two css calss like this...

.showDiv
{
   display: block;
}

.hideDiv
{
   display:none;
}

并在您的下拉菜单中附加一个javascript函数，即可完成剩余的显示隐藏div工作.

该功能将如下所示...

and attache one javascript function with your dropdown that will do your remaining work for show hide div..

the function will look like this...

<script type="text/javascript">
       function showhide(ddl) {
           var div1 = document.getElementById('div1');
           var div2 = document.getElementById('div2');
           if (ddl.value == "DIV1") {
               div1.className = "showDiv";
               div2.className = "hideDiv";
           }
           else{
               div1.className = "hideDiv";
               div2.className = "showDiv";
           }
       }
   </script>

在这里，我已经做了一些演示，它会像这样.

here i have done some demo it will like this.

<asp:dropdownlist id="ddlTest" runat="server" xmlns:asp="#unknown">
        <asp:listitem value="DIV1">DIV1</asp:listitem>
        <asp:listitem value="DIV2">DIV2</asp:listitem>
    </asp:dropdownlist>

    <div id="div1" style="background:#FF00FF;" class="showDiv">
        <br />
    </div>
    <div id="div2" style="background:#0000FF;" class="hideDiv">
    <br />
    </div>

并在page load event
中附加此类onchange javascript函数

and attache onchange javascript function like this in page load event

ddlTest.Attributes.Add("onchange", "showhide(this);");

这篇关于如何使用dropdownlistfor显示和隐藏div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！