Twitter bootstrap: как отобразить всплывающее значение в текстовом поле

Question

Я разработал одно текстовое поле ввода с кнопкой. Когда я нажму кнопку, вы увидите одно всплывающее окно. Popup содержит таблицу со значениями. Теперь я выбрал одно значение, но не отображает в текстовом поле.

Как получить значение? .Пожалуйста, направляйте меня.

<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 е приведены в таблице id для удобства

---

Update с небольшим машинописным. Например, Исходный 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