使用JavaScript将选项添加到选择菜单时出错

Question

I was having two problems: the first is that javascript is not adding options to a menu, and the second was an "Unexpected or invalid token" error at the end of my for loop.

Update: The token error was a weird character thing. I deleted the line that was causing the problem and retyped it and now I am not getting the error anymore, but my script still is not adding options.

I have read about adding options to a select menu but the answers I've found there haven't worked for me. I should point out that this is part of a Joomla website (v3.8), because that can cause some unexpected behaviour.

I have a function which is supposed to pick out a particular select menu based on the string "id", clear its contents, and re-populate it with the elements of the "options" array.

function resetSelectMenu(id, options){
    // Selects the correct menu, enables it, and removes all of its options. 
    var selectMenu = jQuery('#sel-' + id);
    selectMenu.prop('disabled', false);
    selectMenu.empty();        
    // Makes an option element and sets its text and value.
    var el = document.createElement("option");
    el.text = 'blah';
    el.value = 'blah';
    // Does not succeed in adding an option to menu.
    selectMenu.add(el);

    // I declared loop variables here to make sure there are no re-declaration issues.
    var i;
    var opt;
    // The loop is entered and the array is iterated through.
    for(i = 0; i < options.length; i++){
        opt = options[i];
        el = document.createElement("option");
        el.text = opt;
        el.value = i + 1;
        // Does not succeed in adding an option to menu.
        selectMenu.add(el);
    }​

}

The function does target the correct menu and clear its contents, but it is not adding the "blah" option or anything from the "options" array. I've tried using "appendChild(el)" instead of add but I get an error of the form "appendChild() is not a function". I did a lot of console logs to determine that all the parts of the code are working as expected except for "selectMenu.add(el);"

Answer 1

So this was just a noob mistake. I looked a bit harder and found this related question , and the top answer by Matt told me I needed to use append(el) instead of add(el) . I looked into the documentation and the add method just affects the jQuery object but doesn't actually affect the DOM at all, whereas append does. If I were to use add I would need to explicitly tell the jQuery object to refresh the DOM.

It's also possible that there is still an issue with me using selectMenu.empty() instead of something like selectMenu.find('option').remove() , but at the moment it's not causing any errors. Since my select element only contains option elements I feel like these two commands would be the same, but on the other hand maybe the latter is better because it allows for the addition of different kinds of elements later.