0

チェックボックスと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>";
    }));
});

選択したオプションを div に追加しますがoption_list、html の改行タグは出力しません。実際、{ } の間のコードを取り出しても同じことができます。ここで何かが欠けています。

4

4 に答える 4

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/>"));
于 2013-07-02T19:30:57.793 に答える
0

私は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などで削除したりできます

于 2013-07-02T19:30:46.237 に答える
0

これはあなたが探しているものですか？

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

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

また、入力をチェックボックスに変更しましたが、テキストでしたか?

于 2013-07-02T19:35:07.927 に答える