Durch Klicken auf ein Kontrollkästchen zwischen zwei Dropdown-Liste wechseln

Question

Ich habe eine Seite, die 2 Dropdown-Menüs und ein Kontrollkästchen anzeigt. Ich möchte eine Situation, wo, wenn Sie auf das Kontrollkästchen klicken, wird es festzustellen, welche

Standard Dropdown die Dropdownlist unten zeigt die Verwendung Dropdown

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

, wenn Sie das Kontrollkästchen unter displayallproj das Dropdownlist-Anzeige überprüfen. Dies sollte

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

hier umgekehrt ist der HTML-Abschnitt

 <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> 

Hier ist die Jquery, die dieses Verhalten

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

      } 
      else if($(this).is(":not(:checked)")){ 

      } 
     }); 

Bitte beachten Sie, dass für jede aktive Dropdownlist steuern sollen, ich bin Verwenden Sie die ID und verwenden Sie sie, um einige andere Informationen zu ziehen

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

    }); 

Problem: Die zwei Dropdown-Liste rendert Daten zu einem beliebigen Zeitpunkt, wenn Sie auf den HTML schauen, so dass mein Change-Ereignis für das ddlstatusdate verwirrt wird und selectedPrjId = "" zurückgibt, da Daten für die erste und zweite Dropdownliste geladen werden auf der Seite.

Wie kann ich dieses Problem lösen, so dass die Daten für die aktive Dropdownliste die einzige ist, die zu irgendeinem Zeitpunkt im HTML wiedergegeben wird.

Answer 1

Sie haben mehrere Probleme mit Ihrem Code

@name="ddlprojects" entfernen - (die Methode erzeugt bereits name="ddlprojects" sowieso, aber wenn Sie es geändert @name="xyz" zu sagen, Ihr werdet sehen, dass es gar nichts tut).

Ihre Erzeugungs ungültig html, weil beide Dropdownlists id="ddlprojects" (seine ungültige HTML und Sie Selektoren nicht funktionieren JQuery) haben, so verwenden new { id = "", @class = "ddlprojects" } das id Attribut zu entfernen und einen Klassennamen

Dann wird Ihr Skript nicht sicher sein können, verwenden (Welches sollte, wenn überprüft versteckt werden)

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

Sie müssen auch Ihre $('#ddlstatusdate').on('change', function() { ändern nur die sichtbare Dropdownlist unter der Annahme, das ist diejenige, die Sie von den gewählten Wert erhalten möchten, wählen Sie zum Beispiel $('.ddlprojects').not(':hidden');

Und schließlich benötigen Sie ein Skript, um die eine oder andere der Dropdown-Listen zu verbergen, basierend auf dem Anfangswert des Kontrollkästchens, das beim ersten Laden der Seite ausgeführt wird.