Twitter bootstrap：如何在文本框中显示弹出值

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/

注意：为方便起见，已给表格一个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