DropdownlistFor ...显示/隐藏div取决于所选择的内容

Question

我得到了这个下拉列表，从db

中选择了一些选择

@Html.DropDownListFor(m => m.Choosen, new SelectList(Model.test.Select(k => k.ChoosenTest)))

下拉列表包含2个用户选项。在我看来，我还有两个不同的div和 我想显示/隐藏与用户在下拉列表中做出的选择相对应的div而不提交表单。有没有办法做到这一点？

你可以说我希望下拉列表的行为就像一个选择的按钮 用户make可以触发onclick功能。谢谢！

编辑：找到类似的qustion，现在看起来像这样：

 @Html.DropDownListFor(m => m.Choosen, new SelectList(Model.test.Select(k => k.ChoosenTest), new { @class = "dropdown1" }))
                        <br />

                        <div>
                            <select class="dropdown2">
                                <option value="volvo">Volvo</option>
                                <option value="saab">Saab</option>
                                <option value="mercedes">Mercedes</option>
                                <option value="audi">Audi</option>
                            </select>
                        </div>

这是jquery：

$(function () {
        $('.dropdown2').css('display', 'none')
    });

    $(".dropdown1").change(function () {
        $('.dropdown2').toggle();
    });

jquery似乎工作因为它隐藏了dropdown2 onload .. 其余的方法不起作用，我是否以正确的方式给了dropdownlist class =“dropdown1`”？

编辑2：

我把upp给了dropDown它的类： 这似乎是正确的方式：

 @Html.DropDownListFor(m => m.Choosen, new SelectList(Model.test.Select(k => k.ChoosenTest)), new { @class = "dropdown1" })

刚刚将课程向右移动了一步......

Answer 1

使用JQuery应该非常简单 -

<div>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#div1").hide();
            $("#div2").hide();

            $("#choosen").change(function () {
                if ($("#choosen").val() == "one") {
                    $("#div1").show();
                    $("#div2").hide();
                }
                else {
                    $("#div2").show();
                    $("#div1").hide();
                }
            });
        });
    </script>
    <select id="choosen">
        <option value="---">---</option>
        <option value="one">One</option>
        <option value="two">Two</option>
    </select>

    <div id="div1">Div 1</div>
    <div id="div2">Div 2</div>
</div>

输出会有点 -