Twitter引导程序:如何在文本框中显示弹出窗口值 [英] Twitter bootstrap : How to display popup value in text-box

问题描述

我设计了一个带有按钮的输入文本框.单击按钮后将显示一个弹出窗口.弹出窗口包含带有值的表.现在我选择了一个值，但在文本框中未显示任何内容.

I designed one input text-box with button.Once i click the button is show one popup.Popup contains table with values.Now i selected one value but is no display in text-box.

如何获得价值?请指导我.

How to get value?.Please guide me.

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

推荐答案

您可以通过以下方式将表"back"中的单击值传递给<input>:

You can pass a clicked value in the table "back" to the <input> this way :

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

您的代码摆弄-> http://jsfiddle.net/mwfbs3bk/

your code in a fiddle -> http://jsfiddle.net/mwfbs3bk/

NB:为方便起见，已在表格中提供了id

NB : Have given the table an id for convenience

更新，并附有一个简短的示例.最初的bootstrap 2.x易于使用的键入已从bootstrap 3.x中删除.幸运的是，它非常非常容易实现.只是提取旧的源并将其包括在项目中.在这里已经为您完成-> https://github.com/bassjobsen/Bootstrap -3-提前输入

Update with a small typeahead example. The original bootstrap 2.x easy-to-use typeahead was removed from bootstrap 3.x. Fortunetely it is very, very easy to reimplement. It is just to extract the old source and include it in the project. Here it is already done for you -> https://github.com/bassjobsen/Bootstrap-3-Typeahead

只需添加脚本

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

以这种方式将#empname <input>转换为预先输入:

convert your #empname <input> to a typeahead this way :

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

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

updated fiddle from above -> http://jsfiddle.net/mwfbs3bk/2/

这篇关于Twitter引导程序:如何在文本框中显示弹出窗口值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！