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');
})

你的代码在小提琴中 - ＆gt;的 http://jsfiddle.net/mwfbs3bk/

注意：为方便起见，已为表格id
使用小型的前瞻示例
更新。原始bootstrap 2.x易于使用的typeahead已从bootstrap 3.x中删除。幸运的是，重新实现非常非常容易。它只是提取旧源并将其包含在项目中。这里已经为你完成了 - ＆gt;的 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'] });

从上面更新小提琴 - ＆gt;的 http://jsfiddle.net/mwfbs3bk/2/

Answer 2

你可以在jquery中做这样的事情。测试了代码，工作正常。

＆＃13;

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

＆＃13;

<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 -->

＆＃13;

Answer 3

这里只需要编写几行jquery来帮助你实现

＆＃13;

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

＆＃13;

以下是此

的演示代码

<强> Demo

<强> With Fixed Header table

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

3 个答案: