CODEWITHSUNDEEP
javascriptjquery
germainelol
germainelol

Reputation: 3341

jQuery / JavaScript - Appending a select ID

I have some code to generate a dropdown menu, and a dropdown which says 2/4/8, based on whatever the user selects, that number of dropdowns will be created.

Here is the template code:

div.row.hidden#rowTemplate
    label.control-label(for="team") Team:
    div.controls
        select#team1(style='width: 160px;')
            include teamsDropDown

And here is the JS to generate the dropdowns:

script(type='text/javascript')

$("#nTeamSelector").change(function(){
    var nTeams = $("#nTeamSelector").val(); // Get the value of the team selector that you use
    $("#rowContainer").empty() // Delete all existing dropdowns
    for (var i=0; i<nTeams; i++){
        var newRow = $("#rowTemplate").clone(); // Exact copy of the element generated by Jade
        /*
        * here you should change all the little fields that 
        * make the dropdowns different. For example:
        */
        //newRow.children(".control-label").setText("Team "+(i+1)+":");
        newRow.attr('id', 'team'+(i+1)+'Row');
        newRow.removeClass("hidden");
        $("#rowContainer").append(newRow);
    }
});

At the moment I cannot get the setText line to work as I get the error Uncaught TypeError: Object [object Object] has no method 'setText'. As well as this, every dropdown generated has a select with an id of #team1 which is brought over from the rowTemplate code, and I would like to append this to be teami for each drop down generated.

Any ideas?

Upvotes: 0

Views: 87

Answers (1)

Daniel Imms
Daniel Imms

Reputation: 50269

I think you're after .text( textString )

newRow.children(".control-label").text("Team "+(i+1)+":");

To change the select's id you will need to select it as well and apply the id. Something like this:

newRow.find('select').attr('id', 'team' + (i + 1));

Upvotes: 1

Related Questions