CODEWITHSUNDEEP
javascriptjquery
George Phillipson
George Phillipson

Reputation: 860

Create a dropdownlist using JavaScript and add to div

I'm struggling to get my javascript to work, what I'm trying to do, is create a dropdownlist with javascript and then populate it with values before adding it to a div.

I managed to get the code to work when it was just the for loop, but since I tried to create the list and add it to the div it no longer works.

var numberOfAdults = ["Adults (18+) ", "1", "2", "3", "4", "5", "6", "7", "8"];
                alert($(this).val());
                var numberOfRooms = $(this).val();
                switch (numberOfRooms) {
                    case "1":
                        //$('#AdultsRoom1').show();
                       // var list = document.createElement('select');
                       // list.setAttribute("id", "HotelRoom2");
                       // var adult = document.getElementById('HotelRoom2');
                        for (var i = 0; i < numberOfAdults.length; i++) {
                           var list = document.createElement('select');
                           list.setAttribute("id", "HotelRoom2");
                            var opt = document.createElement('option');
                            opt.innerHTML = numberOfAdults[i];
                            opt.value = numberOfAdults[i];
                            list.appendChild(opt);
                            $('#HotelRoom3').html(list);
                        }
                        break;
                }

Thanks for any help

Upvotes: 1

Views: 1733

Answers (1)

Daniel Bejan
Daniel Bejan

Reputation: 1468

I came up with this fiddle from the code you provided. It seems to be working now.

window.onload = function () {
    var numberOfAdults = ["Adults (18+) ", "1", "2", "3", "4", "5", "6", "7", "8"];
    //alert($(this).val());
    var numberOfRooms = "1";
    switch (numberOfRooms) {
        case "1":
            var list = document.createElement('select');
            list.setAttribute("id", "HotelRoom2");
            for (var i = 0; i < numberOfAdults.length; i++) {
                var opt = document.createElement('option');
                opt.innerHTML = numberOfAdults[i];
                opt.value = numberOfAdults[i];
                list.appendChild(opt);
            }
            $('#HotelRoom3').html(list);
            break;
    }
}

Upvotes: 1

Related Questions