隐藏/显示基于其他下拉菜单选择的下拉菜单

Question

最近我的任务是学习MVC工作。我遇到了一个场景，我需要根据另一个下拉菜单选项显示一个下拉菜单。我的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>
}

我希望只有在主选择字段中选择值Y时才能显示showForY。我该怎么做？我知道可以使用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();
    }
});