使用 javascript 向选择菜单添加选项时出错答案

【问题标题】：Error adding options to a select menu with javascript使用 javascript 向选择菜单添加选项时出错
【发布时间】：2018-11-26 19:50:17
【问题描述】：

我遇到了两个问题：第一个是 javascript 没有向菜单添加选项，第二个是我的 for 循环结束时出现“意外或无效令牌”错误。

更新： 令牌错误是一个奇怪的字符。我删除了导致问题的行并重新输入，现在我不再收到错误，但我的脚本仍然没有添加选项。

我已阅读有关向选择菜单添加选项的信息，但我在那里找到的答案对我不起作用。我应该指出，这是 Joomla 网站 (v3.8) 的一部分，因为这可能会导致一些意外行为。

我有一个函数应该根据字符串“id”选择一个特定的选择菜单，清除它的内容，然后用“options”数组的元素重新填充它。

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

}

该函数确实以正确的菜单为目标并清除其内容，但它没有添加“blah”选项或“options”数组中的任何内容。我尝试使用“appendChild(el)”而不是 add，但出现“appendChild() 不是函数”形式的错误。我做了很多控制台日志来确定代码的所有部分都按预期工作，除了“selectMenu.add(el);”

【问题讨论】：

您一定是不小心输入了一个看起来像空格的非法字符。我已将您的代码复制到语法验证器中，得到您提到的错误，删除带有右大括号的行并再次输入大括号 - 错误消失了
哇，删除该行然后重新键入括号确实解决了该错误，哈哈，谢谢。我仍然有 .add(el) 的问题，所以我会更新我的问题以关注这个问题。

标签： javascript drop-down-menu joomla joomla3.8

【解决方案1】：

所以这只是一个菜鸟错误。我仔细看了看，找到了this related question，Matt 的最佳答案告诉我，我需要使用append(el) 而不是add(el)。我查看了文档，add 方法只会影响 jQuery 对象，但实际上根本不会影响 DOM，而append 会。如果我要使用 add，我需要明确告诉 jQuery 对象刷新 DOM。

我使用selectMenu.empty() 而不是selectMenu.find('option').remove() 之类的东西也可能存在问题，但目前它没有导致任何错误。由于我的选择元素只包含选项元素，我觉得这两个命令是一样的，但另一方面，也许后者更好，因为它允许以后添加不同种类的元素。

【讨论】：