CODEWITHSUNDEEP
javascriptjqueryhtml
pablobordons
pablobordons

Reputation: 51

loop inside <select> with jQuery

I don't know why this code doesn't work: 

$("body").append("<select>");

    for (j in boxes[i].ex_options ){

       $("body").append("<option>"+boxes[i].ex_options[j]+"</option>");

                    }

$("body").append("</select>");

<select> items are not correctly displayed.

They're asking for this, just in case:

var Box = function (ex_solution, ex_img, ex_options) {

    this.ex_solution    = ex_solution;
    this.ex_img         = ex_img;
    this.ex_options     = ex_options;

}

var boxes = [];

boxes.push(new Box ("solution1","images/caja1>",["solution 1.1", "option 1.2", "option 1.3"]));

Thank you

Upvotes: 1

Views: 87

Answers (2)

jarz
jarz

Reputation: 732

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<link rel="stylesheet" type="text/css" href="http://brenda.upreach.org.uk/plugins/jquery.datepick.package-4.1.0/redmond.datepick.css"> 
    <script type="text/javascript" src="http://brenda.upreach.org.uk/plugins/jquery.datepick.package-4.1.0/jquery.datepick.js">  </script>


    <script type="text/javascript" language="javascript">
    $(function() {
        $('.datepick').datepick({ 
                dateFormat: 'dd/mm/yyyy', showTrigger: '#calImg'});
    });


    $(document).ready(function(){

        var Box = function (ex_solution, ex_img, ex_options) {
            this.ex_solution    = ex_solution;
            this.ex_img         = ex_img;
            this.ex_options     = ex_options;
        }

        var boxes = [];
        boxes.push(new Box ("solution1","images/caja1>",["solution 1.1", "option 1.2", "option 1.3"]));

        $("body").append("<select></select>");
        $.each(boxes[0].ex_options, function(index, value){
            console.debug(value);
            $("body select").append("<option>"+value+"</option>");
        });

    });
    </script>

    <body></body>

Upvotes: 0

Ry-
Ry-

Reputation: 224963

append(), as @ArunPJohny points out, doesn’t concatenate strings; it appends DOM elements. When you add your first <select>, it creates a <select> element, then adds a bunch of <option>s outside of it. What you can do is create an element and pass an array of <option>s to append(), like this:

$("body").append(
    $("<select>").append(
        $.map(boxes[i].ex_options, function(option) {
            return $("<option>").text(option);
        })
    )
);

Upvotes: 2

Related Questions