如何将1页的下拉值传递给bootstrap模式？

I have a dropdown with a list of values. When user selects 1 from the dropdown and click on a button, a bootstrap modal pops up. I want to pass the dropdown value to the pop up. I know how to do this with 2 different html pages. But can anyone help how to pass the value to the modal.

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

Here is my html code:

这是我的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 -->

In the pop up, in the "Whenever metric" label, instead of "metric" I want to show the value I am selecting from the dropdown. Any help would be appreciated. Thanks.

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

1 个解决方案

#1

I would use JavaScript to read the value from the user selection, and then using DOM manipulation to insert the value where it is needed. The HTML of the modal is just part of your webpage, so the fact that it's a modal shouldn't really change anything.

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

Using jQuery, for example, you can put a trigger on show.bs.modal, you can read the value from anywhere... inside some other html, in the data attribute, wherever you want to put it.

例如,使用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);
});