Bootstrap Modal - 使用 Javascript 将数据传递到 Modal

Question

我想使用 java-脚本将 select/drop-down 数据传递到 bootstrap 模态。我正在使用模式作为确认消息。

我的Select/Drop-down是，

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

我正在使用 java 脚本调用 Bootstrap 模式，如下所示，

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

Bootstrap模态如下，

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

我想做的是pass/show var p_id 进入隐藏字段并显示 var p_name 在模态的 <b id="p_name"></b> 旁边。

当用户从 Select/Drop-down 使用上面的 javascript 函数和 我唯一需要做的就是如何在模式上显示项目名称并将 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');
});

您需要向隐藏字段添加 class 或 ID，以便识别。上面我给它一个 ID 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>

我认为这一切都是不言自明的，但如果没有，我们添加检查以查看项目下拉列表何时更改，然后我们使用 $(this) 变量分配所选项目的值和文本以声明它在#project 下拉 ID。

接下来，我们添加一个侦听器以查看模式何时显示，然后我们可以从那里按照我们想要的方式操作模式。在本例中，我们设置 p_name 文本并设置 p_id.

的值

Bootstrap Modal - 使用 Javascript 将数据传递到 Modal

Bootstrap Modal - Pass data into Modal using Javascript

html

javascript

twitter-bootstrap

bootstrap-modal