Jquery试图隐藏下拉菜单中的选项，除非事先选择

Question

我是PHP和JQuery的新手，我试图找出一种方法来隐藏选项，直到选择它为止。

我有此列表，有很多选项可供选择。但是，只有默认情况下，我只想隐藏一个选项：“否”，并且如果选择“是”，则仅显示在“排序依据”下拉菜单中。

[在后台，当它生成一个表单时，默认情况下有一个“时间”列，并且“生效日期”不存在，因此“生效日期”默认为“否”。一旦将其选择为“是”，则在表单上将时间替换为“生效日期”日期因此显示在“排序依据”下拉列表中，并且可以选择。

HTML：

<tr><td>Effective Dates</td>
    <td><select name="effDate" id="effDate">
        <option value='N' selected>No</option>
        <option value='Y'>Yes</option>
    </select></td></tr>

<tr><td>Sort By</td>
    <td><select name="sortBy" id="sortBy">
        <option value="A">Account</option>
        <option value="H">Branch</option>
        <option value="N">Name</option>
        <option value="C" selected>Transaction Time</option>
        <option id="ED" value="E">Effective Date</option>
        <option value="U">User</option>
</select></td></tr>

我通过Stackoverflow遇到了这个显示/隐藏脚本，但是由于我对JQuery缺乏知识，我猜我对它的设计有误解。

$("#effDate").change(function () {
    var selected_option = $('#effDate').val();
    if (selected_option === 'N') {
        $('#ED').hide();
    }
    if (selected_option == 'Y') {
        $("#ED").show();
    }
})

我也在使用我也是通过Stackoverflow发现的jsfiddle，并尝试使用它，但是我不知道我在做什么...

有什么建议吗？帮助？

Answer 1

$(document).on("change", "#effDate", function() {
    var selected_option = $('#effDate').val();
        $('#sortBy').val('C');
    if (selected_option === 'N') {
        $('#ED').hide();
    }
    if (selected_option == 'Y') {
        $("#ED").show();
    }
    }).trigger('change');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr><td>Effective Dates</td>
    <td><select name="effDate" id="effDate">
        <option value='N' selected>No</option>
        <option value='Y'>Yes</option>
    </select></td></tr>

<tr><td>Sort By</td>
    <td><select name="sortBy" id="sortBy">
        <option value="A">Account</option>
        <option value="H">Branch</option>
        <option value="N">Name</option>
        <option value="C" selected>Transaction Time</option>
        <option id="ED" value="E">Effective Date</option>
        <option value="U">User</option>
</select></td></tr>