Bootstrap：在父窗口中从模式中设置选择值

Question

如果我具有表单中的SELECT菜单，是否可以通过单击Bootstrap模态中的链接来设置其值？

单击链接需要做两件事：

1. 在父窗口的SELECT菜单中设置值
2. 关闭模式窗口（我可以在a标签中做到这一点：onclick="$('#modalBackgrounds').modal('hide')"

这是一个简单的模型：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- form -->

<form>
  <select name="this" id="this" class='form-control'>
    <option value="1">Red</option>
    <option value="2">Orange</option>
    <option value="3">Yellow</option>
    <option value="4">Green</option>
    <option value="5">Blue</option>
  </select>
</form>

<!-- launch modal -->

<hr />
<p><a href="#" data-toggle="modal" data-target="#modalBackgrounds">Launch Modal</a></p>

<!-- modal -->

<!-- Modal Backgrounds -->
<div class="modal fade" id="modalBackgrounds" tabindex="-1" role="dialog" aria-labelledby="myModalLabelFonts" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h1 class="modal-title">Backgrounds...</h1>
      </div>
      <div class="modal-body">
        <div class="embed-responsive z-depth-1-half" style="height:400px;">
          <p><a href="#" onclick="$('#modalBackgrounds').modal('hide')">Red</a></p>
          <p><a href="#" onclick="$('#modalBackgrounds').modal('hide')">Orange</a></p>
          <p><a href="#" onclick="$('#modalBackgrounds').modal('hide')">Yellow</a></p>
          <p><a href="#" onclick="$('#modalBackgrounds').modal('hide')">Blue</a></p>
          <p><a href="#" onclick="$('#modalBackgrounds').modal('hide')">Green</a></p>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

如何通过单击模态窗口中的链接来设置ID /名称为this的SELECT元素的值，同时单击相关链接后还能关闭模态窗口？

Answer 1

您可以将data属性从模式传递到父窗口，并设置选择框的值。另外，无需每次单击都调用onclick="$('#modalBackgrounds').modal('hide')"，只需使用data-dismiss="modal"。

<div class="modal-body">
    <div class="embed-responsive z-depth-1-half" style="height:400px;">
        <p><a href="#" data-value="1" data-dismiss="modal">Red</a></p>
        <p><a href="#" data-value="2" data-dismiss="modal">Orange</a></p>
        <p><a href="#" data-value="3" data-dismiss="modal">Yellow</a></p>
        <p><a href="#" data-value="4" data-dismiss="modal">Blue</a></p>
        <p><a href="#" data-value="5" data-dismiss="modal">Green</a></p>
    </div>
</div>

添加以下脚本：

<script>
    $('.modal-body a').click(function() {
        var value = $(this).data('value');
        $('select#this').val(value)
    })
</script>