Bootstrap Modal - Pass Daten in Modal mit Javascript

Question

Ich möchte Select/Drop-Down-Daten in das Bootstrap-Modal mit Verwendung von Java-Skript übergeben. Ich benutze das Modal als Bestätigungsmeldung.

My Select/Ausgliederungs ist,

<select class="form-control" id="project" name="project_id"> 
    <option value="1"> ABCD </option> 
    <option value="2"> EFGH </option> 
    <option value="3"> IJKL </option> 
    <option selected="selected" value="#">Please Select</option> 
</select> 

und ich bin mit dem Bootstrap Modal Aufruf wie unten mit Hilfe von Javascript,

$('#project').change(function(){ 
    var e  = document.getElementById("project"); 
    var p_id = e.options[e.selectedIndex].value; 
    var p_name = e.options[e.selectedIndex].text; 

    $('#myModal').modal('show'); 
}); 

Die Bootstrap Modal als unten,

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel"></h4> 
     </div> 
     <div class="modal-body modal-mt-hgt"> 
     <form action="" method="post"> 
      <p> Are you sure to comment on <b id="p_name">...PROJECT NAME HERE</b> </p> 
      Enter Your Comment : <textarea rows="3"></textarea> 
      <input type="hidden" name="country" value=""> 
     </form> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Add Task</button> 
     </div> 
     <?= form_close(); ?> 
    </div> 
    </div> 
</div> 

Was ich tun möchte ist pass/show var p_id in die hallo dden Feld und zeigen var p_name in der <b id="p_name"></b> des modalen.

Weitere p_id, p_name erhalten kann, wenn Benutzer eine Option aus dem Select wählen/Ausgliederungs die Javascript-Funktion oben und Das Einzige, was zu tun, ich brauche verwenden ist, wie auf der Modal Projektnamen zu zeigen und zuweisen p_id in die verborgene Feld der Modal

Mit freundlichen Grüßen

Answer 1

ich bin ziemlich neu, um all dies so ist dies wahrscheinlich nicht die beste Lösung, aber es ist eine Lösung.

$('#project').on('change', function() { 
    var p_id = $(this).val(); 
    var p_name = $(this).find(':selected').text(); 

    $('#myModal').on('show.bs.modal', function() 
    { 
     $(this).find('#p_name').text(p_name); 
     $(this).find('#p_id').val(p_id); 
    }); 

    $('#myModal').modal('show'); 
}); 

Sie müssen dem versteckten Feld eine Klasse oder ID hinzufügen, damit es identifiziert werden kann. Oben habe ich eine ID von p_id angegeben.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel"></h4> 
     </div> 
     <div class="modal-body modal-mt-hgt"> 
     <form action="" method="post"> 
      <p> Are you sure to comment on <b id="p_name">...PROJECT NAME HERE</b> </p> 
      Enter Your Comment : <textarea rows="3"></textarea> 
      <input type="hidden" id="p_id" name="country" value=""> 
     </form> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Add Task</button> 
     </div> 
     <?= form_close(); ?> 
    </div> 
    </div> 
</div> 

Ich denke, es ist alles selbsterklärend, aber wenn nicht, fügen wir den Scheck zu sehen, wenn das Projekt Dropdown Änderungen, wir dann den Wert und Text des Elements ausgewählt zuweisen Variable mit dem $ (this), das zu erklären, Es befindet sich in der Drop-down-ID #project.

Als nächstes fügen wir einen Listener hinzu, um zu sehen, wann das Modal gezeigt wird, von dort können wir dann das Modal manipulieren, wie wir wollen. In diesem Beispiel setzen wir den Text p_name und setzen den Wert von p_id.