javascript - 根据其他下拉菜单选择隐藏/显示下拉菜单

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();
    }
});