CODEWITHSUNDEEP
javascriptjquery
Glyn
Glyn

Reputation: 2005

How to populate a dynamically created select with options

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:

enter image description here

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);
    })

Upvotes: 1

Views: 810

Answers (2)

Swati
Swati

Reputation: 28522

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
 })

Upvotes: 1

Yusuf T.
Yusuf T.

Reputation: 980

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);
})

Upvotes: 0

Related Questions