Bootstrap模态框 - 使用Javascript将数据传递到模态框

Question

我希望能够使用JavaScript将选择/下拉数据传递到Bootstrap模态框中。我将该模态框用作确认消息。

我的选择/下拉菜单是：

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

我正在使用以下Javascript调用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>

我想做的是将变量p_id传递/显示到隐藏字段中，并在模态框的<b id="p_name"></b>中显示变量p_name。

进一步说，当用户使用上面的JavaScript函数选择任何选项时，可以获取p_id和p_name，我需要做的唯一事情就是如何在模态框上显示项目名称并将p_id分配给模态框的隐藏字段。

最好的问候

- mapmalith

---

可能重复：https://dev59.com/CGkv5IYBdhLWcg3wZwC-#25060114 - Slavisa Perisic

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

您需要给隐藏字段添加一个类或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 drop down ID中。

接下来，我们添加一个监听器以查看模态框何时显示，从那里我们可以按照我们的意愿操纵模态框。在这个例子中，我们设置了p_name文本并设置了p_id的值。

- Gazreyn

---

使用 show.bs.modal 事件可能是正确的方法，但是你正在添加侦听器时，每当在 #project 上触发 change 事件，这可能不是一个好主意。 - DavidDomain