javascript - 用于打开 Bootstrap 模式并根据 php 中的下拉值传递参数的 anchor 标记

Question

这里有些东西让我卡住了很长一段时间。

我有一个 Php 表单，它有一个 anchor 标记和一个下拉列表。我设法使用 anchor 标记打开了一个模式，但如何将下拉列表的值传递给该模式。

这是 anchor 标记和下拉脚本

<label id="labelfordropdown"><strong>Filter By Month:</strong></label>
<select name="datestart" id="datestart" class="form-control" style="width:500px;">
    <option value="">--Select Month--</option>
    <option value="01">January</option>
    <option value="02">February</option>
    <option value="03">March</option>
    <option value="04">April</option>
    <option value="05">May</option>
    <option value="06">June</option>
    <option value="07">July</option>
    <option value="08">August</option>
    <option value="09">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
</select>

然后是 anchor 标签

<a href="#" data-toggle="modal" data-target="#modalRegister" data-id=""> <span class="glyphicon glyphicon-th-list"></span> Details</a>

这是模态

<div id="modalRegister" class="modal fade" role="dialog">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title" style="text-align-last: center">Register</h4>
        </div>
        <div class="modal-body">

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

我如何使用该 anchor 标记将数据(比方说 December)传递给模态。所以我可以为该模态创建一个 ajax。

谢谢。

Answer 1

试试这个。当模式已经可见时，它将获得您下拉菜单的值。

$('#modalRegister').on('shown.bs.modal', function() {
  var datestart = $('#datestart').val(); // value  of your dropdown
  // it is now up to you on what you do on the value of your dropdown here.
});