Question

在我的模板中，有两个部分。第一部分包含选择列表，第二部分是模态窗口。我想在我的输入（模态窗口）中添加我选择列表中的所选元素。这是我的模板：

{% block content %}

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<select name="name_id" size="1">
{% for i in list_utilisateur %}
  <option value={{ i.user_id }}>{{ i.username }}</option>
{% endfor %}
</select>

<button class="btn btn-primary" id="btn-confirm" name="fdts" type="submit">CONFIRMATION</button>
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="mi-modal">
  <div class="modal-dialog modal-sm">
    <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">CONFIRMEZ</h4>
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-secondary" id="modal-btn-no"><span style="font-size: 50px" class="glyphicon glyphicon-remove-circle">Cancel</button>
      <form class="form-signin" id="login_envoi" method="get" action=".">
        <!--{% csrf_token %}-->
        <input type="text" name="fdts"   value = "@name_id"  >
        <button class="btn btn-success btn-lg" type="submit"><span style="font-size: 74px" class="glyphicon glyphicon-send"> <BR> SEND </button>
      </form>
      </div>
    </div>
  </div>
</div>

 <script>
    var modalConfirm = function(callback){
      $("#btn-confirm").on("click", function(){
        $("#mi-modal").modal('show');
      });
      $("#modal-btn-no").on("click", function(){
        callback(false);
        $("#mi-modal").modal('hide');
      });
      $("#login_envoi").on("click", function(){
        callback(true);
        $("#mi-modal").modal('hide');
      });
 </script>

{% endblock %}

如何将select元素添加到Bootstrap的模态中？

0 个答案: