Adding new options to multiple select elements issue

Question

I have a form where users can pick several locations they want to stay at and they have to specify the time they are going to be at each location but first, they have to enter how many days in general they are going to be at every location, for instance, if I want to be at two locations 2 days at the first one and 3 at the second one, I have to enter 5 days first and then pick the locations I want to stay at specifying for each location how many days I want to be there. Well the thing is that to prevent the user to enter a wrong number of days for a location I created a select elemento for each location so when the user enters the general number of days I fill up the select elements with that information (options from 1 to day number), that is working just fine, but when the user picks a location and especify a day amount for that location I want the rest of the select elements to be filled with the ramaining days, so I use this code to do that

function fillUpSelects2(start, top, who) {

    var optionArray = new Array();

    // create the new options
    for (var i = 1; i <= top; i++) {
        optionArray.push(new Option(i, i));
    }

    // get all the select elements
    var selects = jQuery("select.estanciaselect");

    // loop through the selects to change their content
    for (var i = 0; i < selects.length; i++) {

        // if selects[i] is not the one who triggered the change event
        if (selects[i].getAttribute('id') != who) {

            // then I erase all its options
            selects[i].options.length = 0;

            //and here is where it is supposed to add the new options
            for (var j = 0; j < optionArray.length; j++) {
               selects[i].options[selects[i].options.length] = optionArray[j];
            }
        }
    }
}

well when I run this all the selects end up empty but the last one which gets filled up properlly

Ian · Accepted Answer · 2012-09-28 15:14:54Z

1

If you're using jQuery, you might as well use it to append them:

for (var i = 1; i <= top; i++) {
    $(".selects").prepend($("<option>")
                              .val(i)       // Might have to use .attr("value", i) instead
                              .html(i));
}

Here's a jsFiddle demonstrating two options you could use (including the one above), but there are plenty more:

http://jsfiddle.net/tRHYk/

edited Sep 28, 2012 at 15:14

answered Sep 28, 2012 at 15:03

Ian

51k13 gold badges104 silver badges111 bronze badges

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

4 Comments

Armando Over a year ago

it worked thanks for your help. By the way I used .attr("value", "some value")

Armando Over a year ago

So if I wanted not to use jQuery then I would have to use the first option describe in the example

Ian Over a year ago

@user607502 What I really meant about using jQuery was using the .append and .prepend methods. But I guess so. It's up to you for what you prefer. The reason I like the second example is because it allows you to use jQuery methods to manipulate things more consistently. (this obviously doesn't apply to <option>'s, but) if you wanted to add a click handler to each appended item, it would be much easier with the jQuery approach.

Ian Over a year ago

@user607502 But the nice thing about jQuery is it allows you to create elements and manipulate them in an easier way. For example, when using append and prepend, you can pass it a string of HTML (either individual elements or a long string of all the things you want to add), OR you can pass it a jQuery object (like the second example), OR you could pass it a function that returns what to add. So really, the discussion is between using something like jQuery.append or basic Javascript to add Options.

Community · Accepted Answer · 2017-05-23 11:53:08Z

0

Following is an approach on how to add items to multi-select (though not a direct answer to your question)

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        var o = new Option("option text", "value");
        $(o).html("option text");
        $("#leftValues").append(o);

    });
</script>

<select id="leftValues" size="5" multiple></select>

Refer Adding options to a <select> using jQuery? too

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Aug 23, 2013 at 6:05

LCJ

22.8k69 gold badges269 silver badges439 bronze badges

Collectives™ on Stack Overflow

Adding new options to multiple select elements issue

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related