Javascript 如何在选择项发生更改时正确追加

我有一个非常简单的选择输入，允许多选。我所要做的只是将所选的选项显示在预选项中。在单选时，它似乎工作得很好，但在选择多选时却不行

例如，如果我选择了多个选项，在我的PRE中，它只显示一个项目而不是一个数组

脚本：

$（'selectpicker'）。在（'change'，function（）上{
var test=$（'#selectpicker'）.val（）；
$。每个（测试、功能（值）{
$（'pre#u support'）.html（“”）；
$（'pre#u support'）。追加（“+this+”）；
});
});

---

有人有什么想法吗？

因为您在

$的每次迭代中都清除了
pre\u support
的innerHtml。每个
循环。因此，它将覆盖您设置为
“
的内容

将其移出循环

$('#pre_support').html(""); 
$.each(test, function (value) {       
    $('#pre_support').append("<span class='btn btn-primary btn-xs'>"+this+"</span>");
});

$（'pre#u support'）.html（“”）；
$.each（测试、函数（值）{
$（'pre#u support'）。追加（“+this+”）；
});
因为在
$的每次迭代中，您都在清除
pre\u支持的innerHtml。因此，它将覆盖您设置为
“
的内容

将其移出循环

$('#pre_support').html(""); 
$.each(test, function (value) {       
    $('#pre_support').append("<span class='btn btn-primary btn-xs'>"+this+"</span>");
});

$（'pre#u support'）.html（“”）；
$.each（测试、函数（值）{
$（'pre#u support'）。追加（“+this+”）；
});
这是您的更正，请检查一下

$('#selectpicker').on('change', function(){

    var test = $('#selectpicker').val();

    $('#pre_support').html("");

    $.each(test, function (value) {
        $('#pre_support').append("<span class='btn btn-primary btn-xs'>"+this+"</span>");
    });
});

$（'selectpicker'）。在（'change'，function（）上{
var test=$（'#selectpicker'）.val（）；
$（'pre#u support'）.html（“”）；
$。每个（测试、功能（值）{
$（'pre#u support'）。追加（“+this+”）；
});
});

这是你可以查的

您的错误是在每次迭代中都清除了html。
这是您的更正，请检查一次

$('#selectpicker').on('change', function(){

    var test = $('#selectpicker').val();

    $('#pre_support').html("");

    $.each(test, function (value) {
        $('#pre_support').append("<span class='btn btn-primary btn-xs'>"+this+"</span>");
    });
});

$（'selectpicker'）。在（'change'，function（）上{
var test=$（'#selectpicker'）.val（）；
$（'pre#u support'）.html（“”）；
$。每个（测试、功能（值）{
$（'pre#u support'）。追加（“+this+”）；
});
});

这是你可以查的

您的错误是在每次迭代中都清除了html。
希望这对您有所帮助，并相信您正在寻找它


$（文档）.ready（函数（）{
$（'#selectpicker'）。在（'change'，function（）上{
$（'pre#u support'）.html（“”）；
var test=$（'#selectpicker'）.val（）；
$。每个（测试、功能（值）{
$（'pre#u support'）。追加（“+this+”）；
});
});
});

测试1
测试2
测试3
测试4
测试5
测试6
希望这对您有所帮助，并相信您正在寻找它


$（文档）.ready（函数（）{
$（'#selectpicker'）。在（'change'，function（）上{
$（'pre#u support'）.html（“”）；
var test=$（'#selectpicker'）.val（）；
$。每个（测试、功能（值）{
$（'pre#u support'）。追加（“+this+”）；
});
});
});

测试1
测试2
测试3
测试4
测试5
测试6
jsfiddle不起作用！抱歉，忘记点击保存，这是正在工作的JSFIDLE。JSFIDLE不工作！对不起，忘记点击save，这是正在工作的jsfiddle。这更合理。谢谢这里是正在工作的jsfiddle。这更合理。谢谢这里是正在工作的jsfiddle。