如何将下拉值从 1 页传递到引导模式？

Question

我有一个包含值列表的下拉列表。当用户从下拉列表中选择 1 并单击按钮时，会弹出引导模式。我想将下拉值传递给弹出窗口。我知道如何使用 2 个不同的 html 页面来做到这一点。但是任何人都可以帮助如何将值传递给模态。

这是我的html代码：

<div class="container" style="padding-top: 60px;" >                                          
    <select class="open-CreateAlarm" name="metrics">
        <option value="cpuUsage">CPU Usage</option>
        <option value="memoryUsage">Memory Usage</option>
        <option value="diskRead">Disk Read</option>
        <option value="diskWrite">Disk Write</option>
        <option value="diskUsage">Disk Usage</option>
        <option value="netUsage">Net Usage</option> 
       </select>
       <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-whatever="Create Alarm">Create Alarm</button>
     </div>
   <!-- Modal- Create Alarm -->
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">×</button>
       <h4 class="modal-title">Create Alarm</h4>
       </div>
      <form action="/createAlarm" method="post" id="addcard" class="form-horizontal" role="form">
       <div class="modal-body" style="height: 250px;">
       <div class="form-group" style="height: 30px;">
            <label for="title" class="col-md-3 control-label">Name</label>
            <div class="col-md-9">
               <input type="text" class="form-control" name="name">
            </div>
        </div>
         <div class="form-group" style="height: 30px; margin-bottom:30px;">
            <label for="title" class="col-md-3 control-label">Description</label>
            <div class="col-md-9">
               <textarea class="form-control" name="desc"></textarea>
            </div>
        </div>

           <div class="form-group">
            <label for="priority" class="col-md-3 control-label">Whenever metric: </label>
            <div class="col-md-9">
                <div class="col-md-3">
                <select name="metric" class="form-control">
                <option value="lessthan"><</option>
                <option value="greaterthan">></option>
                <option value="lessthanequalto"><=</option>
                <option value="greaterthanequalto">>=</option>
                </select>
                </div>
                <div class="col-md-3">
                    <input type="text" class="form-control" name="metricnum">
                </div>
            </div>
            </div>
           </div>
          <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button class="btn btn-primary" id="formSubmit" type="submit">Create Alarm</button>
      </div>
     </form>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

在弹出窗口的“无论何时度量”标签中，我想显示从下拉列表中选择的值，而不是“度量”。任何帮助，将不胜感激。谢谢。

Answer 1

我会使用 JavaScript 从用户选择中读取值，然后使用 DOM 操作将值插入到需要的位置。模态的 HTML 只是您网页的一部分，因此它是一个模态的事实不应该真正改变任何东西。

例如，使用 jQuery，您可以在 show.bs.modal 上放置一个触发器，您可以从任何地方读取值...在其他一些 html 中，在 data 属性中，无论您想放置它。

$('#myModal').on('show.bs.modal', function(e) {

    var metrics_key = $('.open-CreateAlarm').val();
    var metrics_label = $(".open-CreateAlarm option:selected").text();

    // Now you have the key and label in variables.

    // Write the key into the textfield.
    $('#myModal input[name="name"]').val(metrics_key);
    // Change the HTML of an element to the label.
    $('#myModal label[for="priority"]').html(metrics_label);
});