Question

我正在使用基于下拉菜单的jquery向div添加内容。用户选择一个项目，并将其添加为<p>元素。

下拉列表是多选的，因此它的值可以是多个项目。

我的代码是：

    $('#dataCombo').on('change', function () {
    var selectedData = $("#dataCombo").val().toString();   //get the selected options
     $('#displayData').replaceWith("<p>"+ selectedData + "</p>"); //add to div
     console.log(selectedData );
});

console.log工作正常，它显示我期望的数据，但div只显示一个项目（第一个选定的数据）。

我想通过使用replaceWith而不是附加它会重新渲染所有月份但没有运气。当我使用追加时，它显示所有选定的项目，但不正确（在每一行重复，因此：data1, data1 data2, data1 data2 data3
而不是：data1, data2, data3

我是如何实现这一目标的？下拉使用bootstrap进行css / js多选功能。

这是更新的jQuery小提琴不太合适： http://jsfiddle.net/vLAcj/1

Answer 1

你为什么使用.replaceWith？这将用新的p标签替换#displayData div。也许这会导致一些问题？我想你可能想用.html代替。像这样：

$('#displayData').html("<p>"+ selectedData + "</p>");

Answer 2

正确的方法是

$('#displayData').html("<p>"+ selectedData + "</p>");

试一试。示例http://jsfiddle.net/nGP6L/2/

Answer 3

另一种方法是使用“追加”：

$( "#displayData" ).append( "<p>"+ selectedData + "</p>" );

使用jQuery动态显示多个内容

3 个答案: