Question

我在我的表单上使用自动完成小部件，它基本上提供了离开城市文本输入字段和返回文本输入字段。

我想在一个div中显示离开，到达和在第二个div中显示相同的返回信息。（即离开多伦多去巴里和回归，巴里到多伦多）。

我的jQuery工作正常，第一次显示信息，但我无法再显示信息反转。

我的表格:(仅显示部分）

<div class="ui-widget">
    <p>
        <label for="tags">Depart From:</label>
        <input type="text" class="departCity" id="tags" size="30" />
    </p>
</div>
<div class="ui-widget">
    <p>
        <label for="tags2">To:</label>
        <input type="text" class="destination" id="tags2" size="30" />
    </p>
</div>

我的代码是：

$(function() {
    $('input[type="text"]').blur(function() {
        $("#" + $(this).attr('id') + "_display").html($(this).val());
    });
});

和html：

<div id="trip">
    <p><strong><span id="tags_display"></span> - <span id="tags2_display"></span></strong></p>
</div>
<div id="returnTrip">
    <p><strong><span id="displayTags2"></span></strong></p>
</div>

正如我所说，“trip”div中的第一部分显示正常，但我想在第二部分克隆/复制它。

我尝试了这个以及其他一些变化，但无法让它第二次显示。我的表格数据不会去任何地方，只会显示。

function open() {
    $('#displayTags2').html($('#tags2_display').clone());
}
open();

提前感谢您的帮助。

Answer 1

您需要一种方法来调用您拥有的复制功能（您所谓的open()）。

您可以创建一个按钮来将行程添加到列表中：

<强> HTML

<div class="ui-widget">
    <p>
        <label for="tags">Depart From:</label>
        <input type="text" class="departCity" id="tags" size="30" />
    </p>
</div>

<div class="ui-widget">
    <p>
        <label for="tags2">To:</label>
        <input type="text" class="destination" id="tags2" size="30" />
    </p>
</div>

<div id="trip">
    <p><strong><span id="tags_display"></span> - <span id="tags2_display"></span></strong></p> 
</div>

<button class="copyTrip">Copy trip</button>

<div id="returnTrip">
    <p><strong><span id="displayTags2"></span></strong></p>
</div>

<强>的Javascript

$(function() {
    $('.copyTrip').on('click', function open() {
        $('#displayTags2').append($('#trip').clone());
    });

    $('input[type="text"]').on('change', function() {
        $("#" + $(this).attr('id') + "_display").html($(this).val());
    });
});

<强> Demo

修改1

所以你只想复制目标值并将其放入隐藏的div中？容易。

我会在每次更改时复制$('#tags2').val()，只需隐藏returnTrip div，除非您选中了回程复选框。

<强>的Javascript

$(function() {

    $('input[type="text"]').on('change', function() {
        $("#" + $(this).attr('id') + "_display").html($(this).val());
        $('#displayTags2').html($('#tags2').val());
    });

});

<强> Demo

Answer 2

如果我真的理解你的问题，也许你的意思是这样的：用open()方法调用你的blur()函数。

$(function() {
    $('input[type="text"]').blur(function() {
        $("#" + $(this).attr('id') + "_display").html($(this).val());
        //update immediately the Return city in the container
        open();
    });
});

使用jquery将输入文本值放在两个div中

2 个答案: