loop inside <select> with jQuery

Question

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

I'm so sorry, bucle is not an english word, I meant a loop. Arun P Johny, what should i use instead? Cause append() usually works for adding html code. — pablobordons
– pablobordons, Commented Dec 4, 2013 at 15:21

Ry- · Accepted Answer · 2013-12-04 15:22:33Z

2

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

answered Dec 4, 2013 at 15:22

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

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

3 Comments

pablobordons Over a year ago

When I try this code I get this error: An attempt was made to reference a Node in a context where it does not exist. If I understand, this is creating a <select></select> and introducing the content of boxes[i].ex_options inside surrounded by <option></option>, isn't? What I don't understand then is why this works and select doesn't: $("body").append("<p>"+boxes[i].ex_solution+"</p>"); $("body").append("<img src='"+boxes[i].ex_img+"'/>"); Thank you for the help

Ry- Over a year ago

@pboest: I tried to explain it in the second sentence – pretty much, the first append() automatically closes the <select>, if you want to think of it like that. As for that error… could you make a jsFiddle/CodePen, please?

pablobordons Over a year ago

Maybe I'm implementing it wrong, I tried.. thank you for your help: codepen.io/pboest/pen/EDLaI

jarz · Accepted Answer · 2013-12-04 15:28:46Z

0

<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>

answered Dec 4, 2013 at 15:28

jarz

7327 silver badges20 bronze badges

3 Comments

Ry- Over a year ago

That’s really inefficient and won’t work that well if there’s any other <select> on the page…

jarz Over a year ago

True. I wasn't going for efficiency. Just trying to illustrate where his/her code went wrong with as few changes to the original as possible. Thanks for the feedback.

pablobordons Over a year ago

Maybe as @minitech said, when I try this it adds every option to every select box, resulting in a first select box with every option else. The only good one is the last created.

Collectives™ on Stack Overflow

loop inside <select> with jQuery

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related