Question

我有一个复选框列表和一个div

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

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

我需要选中已在div中显示的选项。

我试过这个

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>";
    }));
});

它将所选选项添加到option_list div，但不打印html换行标记。事实上，我可以在{}之间取出代码，它也可以做同样的事情。我在这里错过了一些东西。

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 />");
    });
});

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

用jquery .html中的数组项列表替换div

4 个答案: