How to populate a dynamically created select with options

Question

I have used Event binding on dynamically created elements? and Get changed value from <select> using jQuery to get to where I am now.

I am creating two Select dropdowns dynamically ('Activity Type' and 'Activity'). I use the selected item from the first dropdown ('Activity Type') to get a list of options for the second dropdown ('Activity'). How do I populate the second dropdown ('Activity') with the list of options please? Note that each line may have a different initial option selected and therefore a different set of options in the second dropdown.

My code is:

$(document).on('click', '#programDetailTablebody button[name="addPDRow"]', function(e) {
    e.preventDefault();

    var newRows = "";
            newRows += "<tr><td class='button'><button type='button' name='addPDRow' class = 'buttonFront'><span class='glyphicon glyphicon-plus'></span></button></td>";
            newRows += "<td class='keyvalue'><input class='timeWidth timeClass pdValue' name='timeInput' value='07:00'></input></td>"; //Time
            newRows += "<td class='keyvalue'><select class='form-control activityTypeWidth activityTypeClass pdValue' name='activityTypeInput'>" //Activity Type
            newRows += "<option value='' disabled selected>Select Activity Type</option>" + activityTypeOptions + "</select>"
            newRows += "<td class='keyvalue'><select class='form-control activityWidth activityClass pdValue' name='activityInput'>" //Activity
            newRows += "<option value='' disabled selected>Select Activity</option>" + activityOptions + "</select>"
            newRows += "<td class='keyvalue'><input class='equipmentClass pdValue' name='equipmentInput'></input></td>";//Equip. Needed
            newRows += "<td class='keyvalue'><input class='awardClass pdValue' name='awardInput'></input></td>";//Award
            newRows += "<td class='keyvalue'><input class='leadersClass pdValue' name='leadersInput'></input></td>";//Leaders
            newRows += "<td class='button'><button type='button' name='removePDRow' class = 'buttonFront'><span class='glyphicon glyphicon-minus'></span></button></td></tr>";
    
    $(newRows).insertAfter($(this).closest('tr'));
});

$('#programDetailTablebody').on( 'change', "select[name='activityTypeInput']", function (e)  {
    e.preventDefault();
    var activityType = $(this).val();

    $.ajax({
        url : 'PPATActivityListView', ...    
    .done (unction(responseJson1a){
        // JSON response to populate the activities options
        dataType: "json";
        var activityOptionsNew = "";
        $.each(responseJson1a, function() {
            activityOptionsNew += '<option value = ' + this.ppa_id + '>' + this.ppa_activity_name + '</option>';
        });
        alert("activityOptionsNew: " + activityOptionsNew);
        this.activityOptions = activityOptionsNew;
    })
});

This is the page:

I am getting the expected list of options for the second dropdown. So how do I then insert the options into the select for the second dropdown?

I have changed to use arrow function; however, I get an error "Syntax error on token ">", invalid FunctionExpressionHeader".

.done((responseJson1a) => {
        // JSON response to populate the activities options
        dataType: "json";

//      alert(JSON.stringify(responseJson1a));
        var activityOptionsNew = "";
        $.each(responseJson1a, function() {
            activityOptionsNew += '<option value = ' + this.ppa_id + '>' + this.ppa_activity_name + '</option>';
        });
        alert("activityOptionsNew: " + activityOptionsNew);
        $(this).closest('tr').find('.activityClass').html(activityOptionsNew);
    })

Hi , what doesn't work in your code ? is alert("activityOptionsNew: " + activityOptionsNew); showing right values? — Swati
– Swati, Commented Nov 1, 2020 at 12:33
Hi Swati, the population of the second select is not working. The alert is showing - activityOptionsNew: <option value = Ng==>Test 2</option><option value = MTE=>test 4</option><option value = MTA=>Test no awards</option><option value = MQ==>Tests</option><option value = NA==>Tests - Copy</option><option value = Mg==>Tests Copy</option> — Glyn
– Glyn, Commented Nov 1, 2020 at 20:50
Hi , declare this var selector = $(this) outside your ajax call and then inside your done function of ajax do like selector.closest('tr').find('.activityClass').html(activityOptionsNew); — Swati
– Swati, Commented Nov 2, 2020 at 3:53

Swati · Accepted Answer · 2020-11-02 04:59:22Z

1

You need to declare this ( current select-box) outside your ajax call and then access your select-box like below :

var selector = $(this); //declare this
  $.ajax({
      //..
    .done (function(responseJson1a){
        //other codes
      selector.closest('tr').find('.activityClass').html(activityOptionsNew);//add htmls
 })

answered Nov 2, 2020 at 4:59

Swati

28.5k4 gold badges26 silver badges45 bronze badges

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

2 Comments

Glyn Over a year ago

Hi, are you able to help me with this as well. I want to now now add text to the input field on this line "<td class='keyvalue awardClass'><input class='awardClass2 pdValue' name='awardInput' readonly></input></td>". I tried "selector.$('input[name="awardInput"]').val(responseJson1a['awards']);" and that gives the console error "ncaught TypeError: selector.$ is not a function at Object.<anonymous>". If I leave of the "selector." then all roes are update, not just the current row.

Swati Over a year ago

Hi use selector.closest('tr').find('input[name=awardInput]').val(responseJson1a['awards')

Yusuf T. · Accepted Answer · 2020-11-01 05:52:58Z

0

You can change your jQuery ajax.done() to use arrow function, and then just replace .activityClass with activityOptionsNew

.done ((responseJson1a) => {
  ...
  $(this).closest('tr').find('.activityClass').html(activityOptionsNew);
})

answered Nov 1, 2020 at 5:52

Yusuf T.

1,0202 gold badges8 silver badges16 bronze badges

5 Comments

Glyn Over a year ago

I have changed to use arrow function; however, I get an error "Syntax error on token "=", invalid MethodBody". Please see edit in question.

Yusuf T. Over a year ago

Hi @Glyn, sorry I think you wrote the wrong .done(function(responseJson1a) => { ... }) which should be .done ((responseJson1a) => { ... })

Glyn Over a year ago

Thank you so much Yusut. I now get "Syntax error on token ">", invalid FunctionExpressionHeader". Please see edit in question.

Yusuf T. Over a year ago

And it seems that you are also not quite right in placing the dataType: "json"

Glyn Over a year ago

I have removed 'dataType: "json"' and the error is still there.

Collectives™ on Stack Overflow

How to populate a dynamically created select with options

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related