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 ヘルパーの構文は次のようになります。

<%: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/Jクエリ

$(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 に答える