Hide/Show 基于其他下拉菜单选择的下拉菜单

Question

最近接到工作任务，学习MVC。我有 运行 需要显示基于另一个下拉菜单 selection 的下拉菜单的场景。我的 cshtml 在这里：

@using(Html.BeginForm("Make","Order")) {
    <fieldset>
        <h4>Selection1</h4>
        <select id="MAIN" name="main">
            <option value="X">X</option>
            <option value="Y">Y</option>
            <option value="Z">Z</option>
        </select>
        <select id="showForY" name="yOPT" hidden>
            <option value="Y-2">Y-2</option>
            <option value="Y-3">Y-3</option>
        </select>
        <select id="showForZ" name="zOPT" hidden>
            <option value="Z-2">Z-2</option>
            <option value="Z-3">Z-3</option>
        </select>
        <button id="submit" type="submit" value="Submit">Submit</button>
        <button id="reset" type="reset" value="Reset">Reset Form</button>
    </fieldset>
}

我希望 showForY 仅在主 select 字段中 select 值 Y 时显示。我该怎么做？我知道可以使用 JavaScript 或 jQuery 来完成，但从未使用过它们。

Answer 1

CSS

#showForY {
   display: none;
}

jQuery

$('#MAIN').on('change', function(e) {
    var val = $(this).val();
    if (val == 'Y') {
       $('#showForY').fadeIn();
    }
    else {
       $('#showForY').fadeOut();
    }
});