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>