Twitter引導：如何顯示文本框中的彈出窗口

Question

我設計了一個帶有按鈕的輸入文本框。一旦我點擊該按鈕就會顯示一個彈出窗口。包含帶有值的表格。現在，我選擇了一個值，但沒有顯示在文本框中。

如何獲得價值？請引導我。

<div> 
<label for="name" style="margin: 0px;">EMP NAME</label> 
<input type="text" class="input-normal" id="empname" href="#fee-details" data-toggle="modal" style="line-height: initial; margin-left: 6px;"> 
</div> 

<div class="modal fade" id="fee-details" tabindex="-1" role="dialog" aria-labelledby="fee-details-label" aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
    <div class="modal-body"> 
     <table class="table table-condensed"> 
      <thead class="modal-header login-modal-header"> 
       <tr style="width:100%;"> 
        <th style="width:50%;">Header1</th> 
        <th style="width:50%;">Header2</th> 
       </tr> 
      </thead> 
      <tbody class="body"> 
       <tr> 
        <td>1</th> 
        <td class='val'>A</th> 
       </tr> 
       <tr> 
        <td>2</th> 
        <td class='val'>B</th> 
       </tr> 
       <tr> 
        <td>3</th> 
        <td class='val'>C</th> 
       </tr> 
       <tr> 
        <td>4</th> 
        <td class='val'>D</th> 
       </tr> 
       <tr> 
        <td>5</th> 
        <td class='val'>E</th> 
       </tr> 
       <tr> 
        <td>6</th> 
        <td class='val'>F</th> 
       </tr> 
      </tbody> 
     </table>   
    </div> 
</div><!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 

腳本：

$('.body').on('click',function(){ 
$('#empname').val($(this).find('.val').html()); 
$('#fee-details').modal('toggle'); 
}); 

Answer 1

您可以在表中 「回」 到<input>這種方式傳遞一個點擊值：

$("#values tbody td").on('click', function() { 
    $("#empname").val($(this).text()); 
    $("#fee-details").modal('hide'); 
}) 

你的代碼在一個小提琴 - >http://jsfiddle.net/mwfbs3bk/

NB：Hav E中給出的表中的id爲了方便

---

更新具有小預輸入的例子。原始bootstrap 2.x易於使用的typeahead從bootstrap 3.x中刪除。幸運的是，它很容易重新實現。它只是提取舊資源並將其包含在項目中。這已經爲你做 - >https://github.com/bassjobsen/Bootstrap-3-Typeahead

簡單地包括腳本

<script src="https://rawgithub.com/bassjobsen/Bootstrap-3-Typeahead/master/bootstrap3-typeahead.js"></script> 

您#empname<input>到預輸入這種方式轉換：

$("#empname").typeahead({ source: ['London', 'Copenhagen', 'Antwerpen', 'Stockholm', 'Berlin'] }); 

更新小提琴從上面 - >http://jsfiddle.net/mwfbs3bk/2/

Answer 2

你可以在jQuery中做這樣的事情。測試了代碼，工作正常。

$(document).ready(function() { 
 
     $('.tableBody tr').on('click', function() { 
 

 
     $('#empname').val($(this).find('.val').html()); 
 
     $('#fee-details').modal('toggle'); 
 
     }); 
 
    });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<div> 
 
    <label for="name" style="margin: 0px;">EMP NAME</label> 
 
    <input type="text" class="input-normal" id="empname" style="line-height: initial; margin-left: 6px;"> 
 
    <button type="button" id="name_value" class="btn btn-primary btn-xs" href="#fee-details" data-toggle="modal">Select Value</button> 
 
</div> 
 

 
<div class="modal fade" id="fee-details" tabindex="-1" role="dialog" aria-labelledby="fee-details-label" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-body"> 
 
     <table class="table table-condensed"> 
 
      <thead class="modal-header login-modal-header"> 
 
      <tr style="width:100%;"> 
 
       <th style="width:50%;">Header1</th> 
 
       <th style="width:50%;">Header2</th> 
 
      </tr> 
 
      </thead> 
 
      <tbody class="tableBody"> 
 
      <tr> 
 
       <td>1</th> 
 
       <td class="val">A</th> 
 
      </tr> 
 
      <tr> 
 
       <td>2</th> 
 
       <td class="val">B</th> 
 
      </tr> 
 
      <tr> 
 
       <td>3</th> 
 
       <td class="val">C</th> 
 
      </tr> 
 
      <tr> 
 
       <td>4</th> 
 
       <td class="val">D</th> 
 
      </tr> 
 
      <tr> 
 
       <td>5</th> 
 
       <td class="val">E</th> 
 
      </tr> 
 
      <tr> 
 
       <td>6</th> 
 
       <td class="val">F</th> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </div> 
 
    </div> 
 
    <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog -->

Answer 3

這裏只需要編寫的jQuery的幾行，這將有助於你做出

$('tbody td').on('click',function(){ 
 
    var selectedVal = $(this).text().trim(); 
 
    $('#empname').val(selectedVal); 
 
    $("#fee-details").modal('hide'); 
 
})

這裏是演示代碼這

Demo

With Fixed Header table