1

我在 MVC 3 项目中使用下拉菜单 ( Html.DropDownFor(...) ) 的 html 助手。

在加载页面时，我希望这个下拉菜单不可见。根据在同一页面上选择另一个下拉菜单，它将变得可见。我已经编写了一些使用 show() 和 hide() 来处理这个问题的 JQuery。这适用于文本框和标签，但我需要的是帮助器本身的正确语法。我试过了：

<%:Html.DropDownListFor(a => Model.VariableOptionId, new { style = "display: none;" })%>
<%:Html.DropDownListFor(a => Model.VariableOptionId, Visible = false })%>

什么是正确的语法？

4

2 回答 2

1

您可以只添加一个类，例如.dropdown并使用$('.dropdown').toggle(); 切换可见性。

MVC Helper 语法为：

<%:Html.DropDownListFor(a => Model.VariableOptionId, new { @class = "dropdown" }) %>

一个小的代码示例是：

HTML

<div class="toggle">Click me to toggle!</div>
<br>
<div>
    <select class="dropdown">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</div>

JS/jQuery

$(document).delegate('.toggle', 'click', function () {
    $('.dropdown').toggle();
});

工作示例：http: //jsfiddle.net/8AKww/

编辑示例：http: //jsfiddle.net/8AKww/1/

于 2013-07-19T23:44:55.540 回答
0 
 @model MvcApplication1.Models.ProductViewModel
    <script type="text/javascript"    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


      @using (Html.BeginForm())
       {    
        @Html.DropDownListFor(x => x.SelectedMainCatId, new    SelectList(Model.MainCategory,"Value","Text"), "Select Main..")
          @Html.DropDownListFor(x => x.SelectedSubCatId, new SelectList(Model.SubCategory, "Value", "Text"), "Select Sub..")    
        <button type="submit">Save</button>
       }
       <script type="text/javascript">
        $(function () {
            $("#SelectedMainCatId").change(function () {
                var val = $(this).val();
                if(val == 'anycondition')
                 {
                         $("#SubCategory").hide();
                 } 
                 else
                        $("#SubCategory").show();
            });
        });
    </script>
于 2013-07-20T09:40:06.807 回答