Für ausgewählte Elemente von Popup-Toggle Div-Code

Question

Mein Problem scheint für mich sehr kompliziert. Also brauche ich Hilfe von dir, Freunde. Ich werde versuchen, es zu erklären.

Bild1:

In der oberen Bild, wenn der Benutzer klickt auf "+ Hinzufügen/Bearbeiten" und dann einem Popup wie unten image2 erscheint.

Bild2:

Wenn Benutzer irgendwelche medizinischen Zustand von Pop-up auswählt wird es unter image3 auf Seite wie

Image3 angezeigt bekommen:

Die HTML and script code für die obige Funktionalität ist hier (bitte ignorieren Sie das Ergebnis der Geige, nur für Code verwendet): https://jsfiddle.net/kirankapur/cr6t1tds/

Jetzt die eine weitere neue Funktion, die ich hinzufügen muss.

Image4:

Wenn wir irgendwelche medizinischen Zustand von Image2 dann "Family Medical History" Abschnitt auszuwählen, wie in Image4 gezeigt erscheinen soll. z.B. "Alzheimer-Krankheit" und "Asthma" sind so ausgewählt, wenn wir auf die Popup-Schaltfläche klicken (Fertig), dann erscheint der Abschnitt "Familienanamnese" (dies sollte entsprechend auswählen/abwählen), in dem jeweils ein anderes "+ Hinzufügen/Bearbeiten" vorhanden ist. Mit Klick auf '+ Hinzufügen/Bearbeiten' öffnet sich ein weiteres Popup wie unten gezeigt Image5.

Image5:

Image5 Popup-Fenster für "Family Medical History" -Abschnitt Artikel gleich sein, aber jeweils unterschiedliche Benutzereingaben haben.

Frage: Nach Image5 Popup-Benutzerauswahlergebnis wie unten Bild

Image6 sein sollte, bin ich nicht immer wie soll ich diese neue Funktionalität erreichen, erklärte in Image4, Image5 und Image6.

Kann mir bitte jemand dabei helfen?(Entschuldigung für diese lange Frage)

Answer 1

Here Sie können eine quick jsfiddle sample in reinem JQuery und HTML (keine Strukturen, keine Persistenz der Daten) finden, der Code ist nicht so elegant (kann verbessert und vereinfacht werden), aber geben Sie eine Vorstellung davon wie Sie das gewünschte Verhalten erzielen können.

HTML

<div id="dlgMedical" style="display:none;"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <ul class="list-group"> 
     <li class="list-group-item"><input type="checkbox" value="None"> None</li> 
     <li class="list-group-item"><input type="checkbox" value="Depression"> Depression</li> 
     <li class="list-group-item"><input type="checkbox" value="Lung cancer"> Lung cancer</li> 
     <li class="list-group-item"><input type="checkbox" value="Anxiety"> Anxiety</li> 
     <li class="list-group-item"><input type="checkbox" value="Stroke"> Stroke</li> 
     </ul> 
    </div> 
     <div class="row"> 
     <div class="col-xs-6 col-xs-offset-3"> 
      <button class="btn btn-block btn-warning btn-lg" id="cmdDiseaseDone"> 
      DONE 
      </button> 
     </div> 
     </div> 
    </div> 
</div> 

<div id="dlgParents" style="display:none;"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <ul class="list-group"> 
     <li class="list-group-item"><input type="checkbox" value="Mother"> Mother</li> 
     <li class="list-group-item"><input type="checkbox" value="Father"> Father</li> 
     <li class="list-group-item"><input type="checkbox" value="Brother"> Brother</li> 
     <li class="list-group-item"><input type="checkbox" value="Sister"> Sister</li> 
     <li class="list-group-item"><input type="checkbox" value="Uncle"> Uncle</li> 
     </ul> 
    </div> 
     <div class="row"> 
     <div class="col-xs-6 col-xs-offset-3"> 
      <button class="btn btn-block btn-warning btn-lg" id="cmdParentsDone"> 
      DONE 
      </button> 
     </div> 
     </div> 
    </div> 
</div> 


<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <div class="panel-title bold">FAMILY MEDICAL HISTORY CONDITION(S)</div> 
     <h5>Select medical condition(s)</h5> 
     <a id="addDisease">+ Add/Edit</a> 
    </div> 
    </div> 
    <div class="row">&nbsp;</div><div class="row">&nbsp;</div> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <div class="panel-title bold">FAMILY MEDICAL HISTORY</div> 
     <h5>Select patient's family members</h5> 
     <div id="divDisease"></div> 
    </div> 
    </div> 
</div> 

CSS

.noTitleStuff .ui-dialog-titlebar {display:none;} 
.bold{font-weight: bold;} 
.item{font-style: italic;} 
.addParent{padding:5px;} 

Javascript

$("#dlgMedical").dialog({autoOpen : false, modal : true, show : "blind", hide : "blind",dialogClass: 'noTitleStuff', width:400}); 

    $("#dlgParents").dialog({autoOpen : false, modal : true, show : "blind", hide : "blind",dialogClass: 'noTitleStuff', width:400}); 

    $("#addDisease").click(function() { 
    $("#dlgMedical").dialog("open"); 
    }); 
    $("#cmdDiseaseDone").click(function() { 
    // clear selection 
    $('#divDisease').empty(); 
    // iterate selected disease 
    $("li > input:checked").each(function(index) { 
     // add history elements 
     var newID = $(this).attr('value').replace(' ','_'); 
     $('#divDisease').html($('#divDisease').html() + '<div class="row"><div class="col-xs-12"><div class="item">'+$(this).attr('value')+'</div></div></div><div id="div'+newID+'"></div><div class="row"><div class="col-xs-12"><a id="'+newID+'" class="addParent">+ Add/Edit</a></div></div><div class="row">&nbsp;</div>'); 
     $(".addParent").click(function(e) { 
     selectedItem = $(e.target).attr('id'); 
     $("#dlgParents").dialog("open"); 
     }); 
    }); 
    // clear checked 
    $("li > input:checked").each(function(index) { 
     $(this).prop('checked',false); 
    }); 
    $("#dlgMedical").dialog("close"); 
    }); 

    var selectedItem; 

    $("#cmdParentsDone").click(function() { 
    // clear selection 
    var selectedDIV = $('#div'+selectedItem); 
    selectedDIV.empty(); 
    // iterate selected disease 
    selectedDIV.html('<ul>'); 
    $("li > input:checked").each(function(index) { 
     selectedDIV.html(selectedDIV.html() + '<li class="item">'+$(this).attr('value')+'</li>'); 
    }); 
    selectedDIV.html(selectedDIV.html() + '</ul>'); 
    // clear checked 
    $("li > input:checked").each(function(index) { 
     $(this).prop('checked',false); 
    }); 
    $("#dlgParents").dialog("close"); 
    });