Bootstrap Modal - Передача данных в Modal с использованием Javascript

Question

Я хочу передать выбранные/выпадающие данные в bootstrap modal с использованием java-скрипта. Я использую modal как подтверждение.

My Select/Drop-вниз,

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

и я называю Bootstrap Modal с помощью 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'); 
}); 

бутстрапом Модальные как ниже,

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

Что я хочу сделать, это пройти/показать var p_id в привет dden и показать var p_name в стороне <b id="p_name"></b> модального.

Далее p_id, p_name может получить, когда пользователь выбирает любую опцию из Select/Выпадающего с помощью яваскрипта функции выше и Единственного, что мне нужно сделать, это как показать имя проекта на модальном и назначить p_id в скрытом поле модального

с наилучшими пожеланиями

Answer 1

Я довольно новыми для всего этого, так это, вероятно, не самое лучшее решение, но это решение.

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

Вам нужно будет добавить класс или идентификатор в скрытое поле, чтобы его можно было идентифицировать. Выше я дал ему идентификатор p_id.

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

Я думаю, что это все за себя, но если нет, то мы добавим проверку, чтобы увидеть, когда изменения DropDown проекта, мы затем присвоить значение и текст выбранного элемента с помощью $ (это) переменная утверждать, что он находится в выпадающем идентификаторе #project.

Далее мы добавим слушателя, чтобы увидеть, когда модален будет показан, оттуда мы сможем манипулировать модальным, как мы хотим. В этом примере мы устанавливаем текст p_name и устанавливаем значение p_id.