Question

I have a select option box that is dynamically populated, so if I change the select some other boxes are filled, and I can delete them too.
Which also deletes the option from the select box, this works fine, but when I delete the options and I have just one left in the box, there seem to be no way to fire the option.

$("#email_name").on("change", function(){
    var componentkeys = myDailyemail.getKeys($("#Component").val());
    $.each(componentkeys, function(kIndex, kItem) {
        $("#key").append($("<option/>").val(kItem).text(kItem.toUpperCase()));
    });
});

Answer 1

You can automatically trigger a change event after you populated the select element, making it as if the user already selected the first option.

$("#email_name").on("change", function(){
    var componentkeys = myDailyemail.getKeys($("#Component").val());
    $.each(componentkeys, function(kIndex, kItem) {
        $("#key").append($("<option/>").val(kItem).text(kItem.toUpperCase()));
    });
    $("#key").trigger("change"); // trigger key
}).trigger("change"); // trigger email_name

I wasn’t sure what you wanted to trigger so I entered both possibilities.