1

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

我想在一个 div 中显示 Depart From 和 Arrive At，在第二个 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();​

提前感谢您的帮助。

4

2 回答 2

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());
    });
});​

演示

编辑 1

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

$('#tags2').val()每次更改时我都会复制它，并隐藏returnTripdiv，除非您的回程复选框被选中。

Javascript

$(function() {

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

});​

演示

于 2012-11-27T01:54:13.653 回答
0

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

$(function() {
    $('input[type="text"]').blur(function() {
        $("#" + $(this).attr('id') + "_display").html($(this).val());
        //update immediately the Return city in the container
        open();
    });
});​
于 2012-11-27T01:49:49.070 回答