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, Nov 01 '20 at 12:33
Hi Swati, the population of the second select is not working. The alert is showing - activityOptionsNew: — Glyn, Nov 01 '20 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, Nov 02 '20 at 03:53

score 1 · Accepted Answer · answered Nov 02 '20 at 04:59

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 02 '20 at 04:59

Swati

23,244
4
14
34

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 "". I tried "selector.$('input[name="awardInput"]').val(responseJson1a['awards']);" and that gives the console error "ncaught TypeError: selector.$ is not a function at Object.". If I leave of the "selector." then all roes are update, not just the current row. – Glyn Nov 03 '20 at 01:00
1

Hi use `selector.closest('tr').find('input[name=awardInput]').val(responseJson1a['awards')` – Swati Nov 03 '20 at 03:31

score 0 · Answer 2 · answered Nov 01 '20 at 05:52

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 01 '20 at 05:52

Yusuf T

408
2
8

I have changed to use arrow function; however, I get an error "Syntax error on token "=", invalid MethodBody". Please see edit in question. – Glyn Nov 01 '20 at 06:09
Hi @Glyn, sorry I think you wrote the wrong `.done(function(responseJson1a) => { ... })` which should be `.done ((responseJson1a) => { ... })` – Yusuf T Nov 01 '20 at 06:17
Thank you so much Yusut. I now get "Syntax error on token ">", invalid FunctionExpressionHeader". Please see edit in question. – Glyn Nov 01 '20 at 06:24
And it seems that you are also not quite right in placing the `dataType: "json"` – Yusuf T Nov 01 '20 at 06:24
I have removed 'dataType: "json"' and the error is still there. – Glyn Nov 01 '20 at 06:30

How to populate a dynamically created select with options

2 Answers2