javascript - replace div with list of array items in jquery .html

Question

I have a list of checkboxes and a div

<input class="option" value="black option" />
<input class="option" value="red option" />
<input class="option" value="green option" />

<div class="option_list"> </div>

I need the options that are checked off to show in the div.

I tried this

var option_array = new Array();
$('.option').click(function () {
    var option = $(this).val();
    option_array.push(option);

    $('.option_list').html($.each(option_array, function (key, value) {
        value + "<br>";
    }));
});

It adds the selected option to the option_list div, but does not print the html line break tag. In fact, I can take out the code between the { } and it does the same thing. I'm missing something here.

Answer 1

您使用每种方法的方式都不起作用，请查看 map()。

var html =  $.map(option_array,
                function( value, index ) { 
                    return value;
                }).join("<br/>");

$('.option_list').html(html);

但你没有做任何逻辑，所以我不确定你为什么不只是做一个加入。

$('.option_list').html(option_array.join("<br/>"));

Answer 2

我会使用 HTML：

var option_array = new Array();
        $('.option').click(function(){
            var option = $(this).val();
            option_array.push("<li>" + option + <"li">); //Wrap each option in li
            var optionHTML = "<ul>  + option_array.split("") + "</ul">//Wrap the whole thing in ul
                $('.option_list').html(optionHTML);
        });

这样，您可以使用 css 控制每个列表项，使用 javascript 或其他方式将其删除

Answer 3

我喜欢为 .html() 提供一个函数。

$('.option_list').html(function(){
  var selected = [];
  $(':checked').each(function(){
    selected.push($(this).val());
  });
  return selected.join(', ');
});

Answer 4

这是你想要的？

http://jsfiddle.net/DPXD2/1/

$(".option").on("change", function() {
    $ol = $(".option_list");
    $ol.empty();
    $(".option:checked").each( function() {
        $ol.append(this.value + "<br />");
    });
});

我还将您的输入更改为复选框，它们是文本吗？