Question

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

在加载页面时，我希望此下拉菜单不可见。它将变为可见，具体取决于同一页面上另一个下拉菜单的选择。我写了一些JQuery来处理这个，它使用了show（）和hide（）。这适用于文本框和标签，但我需要的是帮助程序本身的正确语法。我试过了：

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

正确的语法是什么？

Answer 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/

Answer 2

 @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>

Html.DropDownListFor使可见/不可见

2 个答案: