如何在文本框中显示弹出的选定值

时间:2015-10-14 06:33:10

标签: jquery html5 twitter-bootstrap-3

我设计了一个带按钮的输入文本框。一旦我点击文本框,它就会显示一个popup.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');
});

1 个答案:

答案 0 :(得分:1)

如果要在文本框中显示所选单元格(td)值。您可以在js文件中使用以下语句。

jQuery('.body tr td').on('click',function()
{
   //get cell text currently selected by user and display in the text box
   jQuery('#empname').val(this.firstChild.nodeValue);


});

注意 -  this.firstChild.nodeValue - 显示来自您选择的td的文本。