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.

James Montagne · Accepted Answer · 2013-07-02 20:31:28Z

1

The way you are using each is not going to work, look into map().

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

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

but you are not doing any logic, so I am not sure why you are not just doing a join.

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

edited Jul 2, 2013 at 20:31

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

answered Jul 2, 2013 at 19:30

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

James Montagne Over a year ago

map returns an array, you can't call .get() on it. The function also doesn't get passed "key" and "value". It is "element" and "index". As a result "value" here is the array index.

epascarello Over a year ago

I forgot to swap it out from copying the original post, changed it around.

raam86 · Accepted Answer · 2013-07-02 19:30:46Z

0

I would make use of 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);
        });

This way you can control each list item with css, remove it with javascript or whatever

answered Jul 2, 2013 at 19:30

raam86

6,8812 gold badges33 silver badges46 bronze badges

Comments

Bill Criswell · Accepted Answer · 2013-07-02 19:34:13Z

0

I like supplying a function to .html().

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

answered Jul 2, 2013 at 19:34

Bill Criswell

33k8 gold badges80 silver badges68 bronze badges

Comments

Smern · Accepted Answer · 2013-07-02 19:35:07Z

0

Is this what you are looking for?

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

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

I also changed your inputs to checkboxes, they were text?

answered Jul 2, 2013 at 19:35

Smern

19.1k22 gold badges77 silver badges93 bronze badges

Collectives™ on Stack Overflow

replace div with list of array items in jquery .html

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related