如何將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); 
});