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 =＆＃34;＆＃34;因为第一个和第二个下拉列表的数据已加载到页面上。

如何解决此问题，以便活动下拉列表的数据是在任何时间点在html中呈现的唯一数据。

Answer 1

您的代码存在多个问题

删除@name="ddlprojects" - （该方法已生成name="ddlprojects"但是如果您将其更改为@name="xyz"，则会看到它根本不执行任何操作。

您生成无效的HTML，因为两个下拉列表都有id="ddlprojects"（其无效的html和您的jquery选择器不起作用），因此请使用new { id = "", @class = "ddlprojects" }删除id属性并使用类名< / p>

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

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

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

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

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

1 个答案: