Question

我有大量的select标签，我使用jQuery向用户显示他的选择的概述。除了我的代码不仅显示我的最后选择这一事实外，这完美地运行。因此，如果我更改我的选择，之前的选择将保留在概览中，我的新选择将在下面列出。

在这里，我已经多次更改了我的选择，并且它们都被列出了。我只想显示我最近的选择（对于每个选择标签）

这是我的剧本;

$(document).ready(function () {
    $('#SORTERING select').change(function() {
        label = $(this).closest("p").prev().find('label').html();
        content = $(this).find('option:selected').text();
        $('#OutputTXT').append('<p><b>' +label+ ': </b>' +content+ '</p>');
    });
});

我需要做些什么来解决这个问题？谢谢你的帮助！

以下是select标记的HTML，如下所示：

<div id="SORTERING">
    <p class="chck">
        <input type="checkbox" id="c4" name="cc"/>
        <label for="c4"><span></span>Avtale</label>
    </p>
    <p class="select">
        <select id="s4" name="s4">
            <option value="blank"></option>
            <option value="salgge">DB Salg GE</option>
            <option value="salgkin">DB Salg KIN</option>
            <option value="salghk">DB Salg HK</option>
            <option value="nei">DB Nei</option>
            <option value="samf">DB Samfakturering</option>
            <option value="eksge">DB Kunder GE</option>
            <option value="ekshk">DB Kunder HK</option>
            <option value="ekskin">DB Kunder KIN</option>
            <option value="del">Slett</option>
            <option value="forward">Viderefør</option>
            <option value="liste1">HK Nordland</option>
            <option value="liste2">Kveldsliste</option>
            <option value="addlist">Legg til liste</option>
        </select>
    </p>
</div>

Answer 1

不使用append()（因为这将在每个选择上创建一个新元素），而是使用html()，因为这样每次都会覆盖该值：

$('#OutputTXT').html('<p><b>' + label + ':</b> ' + content + '</p>');

我希望它为每个选择显示一行而不是替换它

在这种情况下，逻辑变得更加复杂，因为您需要检查所选择的选择是否存在p，如果是，则更新它，否则创建它。像这样：

$('#SORTERING select').change(function() {
    label = $(this).closest("p").prev().find('label').html();
    content = $(this).find('option:selected').text();
    var $p = $('#output_' + this.id);
    if (!$p.length)
        $p = $('<p id="output_' + this.id + '"></p>').appendTo('#OutputTXT');

    $p.html('<b>' + label + ': </b>' + content);
});

显示我的最后选择

1 个答案: