Create html tags using JQuery

Question

I need to create option tags inside a select tag using JQuery,

this is the select tag:

<select id="tickets-room" style="height: 20px; width:200px; display: inline-block; margin-top:30px;" onchange="refreshRooms(this.value);">
</select>

Each option tag need an ID like 1,2,3,4

Each option tag should recieve "resp[].key" as it text.

I don't know if it makes sense, but i don't know how to explain it very well, this is the code i have with some of the elements i need. resp.key is the name i need as a text inside option tags, resp.value is an url i need to place on a button outside the select tag.

function refreshRooms(city){
    $.ajax('/services/tickets/<%= movieId %>?city=' + city).done(
        function(resp){
            alert(resp.length);
            console.log(resp[0].key + " " + resp[0].value); 
        }
    );      
}

Use api.jquery.com/append

DontVoteMeDown
– DontVoteMeDown

2013-08-19 17:51:54 +00:00
Commented Aug 19, 2013 at 17:51 — DontVoteMeDown
– DontVoteMeDown, Commented Aug 19, 2013 at 17:51

DontVoteMeDown · Accepted Answer · 2013-08-19 18:03:07Z

2

Use jQuery.append():

function refreshRooms(city){
    $.ajax('/services/tickets/<%= movieId %>?city=' + city).done(
        function(resp){
            var sel = $("#tickets-room");

            for (var i = 0; i < resp.length; i++) {
                sel.append('<option value="' + resp[i].key + '">' + resp[i].value + '</option>');
            }
        }
    );      
}

edited Aug 19, 2013 at 18:03

answered Aug 19, 2013 at 17:53

DontVoteMeDown

21.5k10 gold badges72 silver badges113 bronze badges

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

2 Comments

Roger Barreto Over a year ago

This approch will add only the first element of the ajax request. Must interate

DontVoteMeDown Over a year ago

@Roger I'll really appreciate if you take off your downvote now. :-)

Roger Barreto · Accepted Answer · 2013-08-19 17:56:29Z

1

function refreshRooms(city){
    var jqTickers = $('#tickets-room');
    $.ajax('/services/tickets/<%= movieId %>?city=' + city)
        .done(function(resp){
            $.each(resp, function() {
                jqTickers.append($('<option value="' + this.key + '">' + this.value + '</option>')
            });
        });
    });      
}

answered Aug 19, 2013 at 17:56

Roger Barreto

2,2841 gold badge19 silver badges24 bronze badges

Comments

Sumurai8 · Accepted Answer · 2013-08-19 17:57:37Z

1

You can make new elements using the following syntax:

$('<option></option>');

This element however resides nowhere. It hasn't been added to the DOM, so it isn't visible. You'll need to use the append method or the appendTo method for that. It would look something like:

$('#tickets-room').append( $('<option></option>').attr( {'id':i,'value':resp[i].key} ).html( resp[i].key ) );

answered Aug 19, 2013 at 17:57

Sumurai8

20.8k11 gold badges70 silver badges103 bronze badges

5 Comments

diogo Over a year ago

Thanks man, i used it inside a for event and works pretty good, only issue is, i need all the options to clear when i call refreshRoom again... How would i do it?

Sumurai8 Over a year ago

$('#tickets-room').html( '' ); should do the trick (you simply overwrite the html inside the tag with... well... nothing)

diogo Over a year ago

thanks man, i did it using ().remove();... now could u help me with one last thing? i have a button that needs to go to a specifc url given by resp[i].value... is it possible?

Sumurai8 Over a year ago

If you understand the code above, you should have no trouble making it ;-)

diogo Over a year ago

i put the url in each option's value element, i just don't know how to make the button goes to the selected options url... =/

Collectives™ on Stack Overflow

Create html tags using JQuery

3 Answers 3

2 Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related