通过单击复选框在两个下拉列表之间切换

Question

我有一个页面，显示2个下拉列表和一个复选框。我想要一种情况，当你点击复选框时，它将决定使用的下拉列表

默认下拉列表显示下方的下拉列表

        @Html.DropDownList("ddlprojects", Model.GetProjectInformationActive.ProjectsInfoSelectList, Model.GetProjectInformationActive.SelectedProject, new { @class = "selactive", @name="ddlprojects", @onchange="javascript:GetStatusDate(this.value);"}) 

选中displayallproj复选框时，显示下面的下拉列表。反之亦然

       @Html.DropDownList("ddlprojects", Model.GetProjectInformationInActive.ProjectsInfoSelectList, Model.GetProjectInformationInActive.SelectedProject, new { @class = "selinactive", @name = "ddlprojects", @onchange = "javascript:GetStatusDate(this.value);" })  

这是html部分

        <div id="ProjID">
            <label for="SelectProjID">Project:</label>
            @Html.DropDownList("ddlprojects", Model.GetProjectInformationActive.ProjectsInfoSelectList, Model.GetProjectInformationActive.SelectedProject, new { @class = "selactive", @name="ddlprojects", @onchange="javascript:GetStatusDate(this.value);"}) 
            @Html.DropDownList("ddlprojects", Model.GetProjectInformationInActive.ProjectsInfoSelectList, Model.GetProjectInformationInActive.SelectedProject, new { @class = "selinactive", @name = "ddlprojects", @onchange = "javascript:GetStatusDate(this.value);" })         
            <div id="DisplayAllProjects">
                <input type="checkbox" value="DisplayAllProj" name="AllProj" id="AllProj">
                <label for="SelectAll">Display ALL projects, active and inactive. (Active projects shown by default.)</label>
            </div>
        </div>
        <div id="StatDate">               
            <label for="SelectStatDate">Status Date:</label>
            <select id="ddlstatusdate" name="ddlstatusdate" >Select status date</select>
        </div>

以下是应该控制这种行为的jquery

         //To do
        $('#AllProj').click(function () {
            if($(this).is(":checked")){
            }
            else if($(this).is(":not(:checked)")){
            }
        });

请注意，对于任何活跃的下拉列表，我正在使用ID并使用它来提取一些其他信息

         $('#ddlstatusdate').on('change', function () {
         var selectedPrjId = $('#ddlprojects').val();
         var things = $('#ddlstatusdate').val();
         $.get('@Url.Action("GetNoteResult", "Home")', { 'selectedData': things, 'selectedProjectId': selectedPrjId }, function (result) {
             $('#ProgressHealth').html(result);
         });
    });

问题：当你查看html时，两个下拉列表会在任何时间点呈现数据，所以我对ddlstatusdate的更改事件是感到困惑并返回selectedPrjId="，因为第一个和第二个下拉列表的数据已加载到页面上。

如何解决这个问题，使活动dropdownlist的数据在任何时间点都是html中唯一呈现的数据。

Answer 1

您的代码存在多个问题

移除@name="ddlprojects"-（无论如何，该方法已经生成name="ddlprojects"，但如果您将其更改为@name="xyz"，您将看到它什么都不做）。

您生成的无效html是因为两个dropdownlists都有id="ddlprojects"（它的无效html和jquery选择器不起作用），所以使用new { id = "", @class = "ddlprojects" }删除id属性并使用类名

然后你的脚本可以是（如果选中，不确定哪一个应该隐藏）

$('#AllProj').click(function () {
    $('.ddlprojects').show();
    if($(this).is(":checked")) {
        $('.ddlprojects').first().hide();
    }
    else {
        $('.ddlprojects').last().hide();
    }
});

您还需要更改$('#ddlstatusdate').on('change', function () {以仅选择可见的下拉列表，假设这是您想要从中获取所选值的下拉列表（例如$('.ddlprojects').not(':hidden'); ）

最后，您需要一个脚本来根据页面首次加载时运行的复选框的初始值隐藏一个或另一个下拉列表。