使用 javascript 向 select 菜单添加选项时出错
Error adding options to a select menu with javascript
我有两个问题:第一个是 javascript 没有向菜单添加选项,第二个是我的 for 循环末尾的 "Unexpected or invalid token" 错误。
更新:
令牌错误是一个奇怪的字符。我删除了导致问题的行并重新输入,现在我不再收到错误,但我的脚本仍然没有添加选项。
我已阅读有关向 select 菜单添加选项的信息,但我在那里找到的答案对我不起作用。我应该指出,这是 Joomla 网站 (v3.8) 的一部分,因为这可能会导致一些意外行为。
我有一个函数应该根据字符串 "id" 挑选出一个特定的 select 菜单,清除它的内容,然后用 [=27] 的元素重新填充它=]数组。
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)" 而不是添加,但我收到 "appendChild() is not a function" 形式的错误。我做了很多控制台日志以确定代码的所有部分都按预期工作,除了 "selectMenu.add(el);"
所以这只是一个菜鸟错误。我仔细看了看,发现 this related question,Matt 的最佳答案告诉我我需要使用 append(el)
而不是 add(el)
。我查看了文档,add
方法只影响 jQuery 对象,但实际上根本不影响 DOM,而 append
会。如果我要使用 add
我需要明确告诉 jQuery 对象刷新 DOM.
也有可能我使用 selectMenu.empty()
而不是 selectMenu.find('option').remove()
之类的东西仍然存在问题,但目前它不会导致任何错误。由于我的 select 元素只包含选项元素,我觉得这两个命令是一样的,但另一方面也许后者更好,因为它允许以后添加不同种类的元素。
我有两个问题:第一个是 javascript 没有向菜单添加选项,第二个是我的 for 循环末尾的 "Unexpected or invalid token" 错误。
更新: 令牌错误是一个奇怪的字符。我删除了导致问题的行并重新输入,现在我不再收到错误,但我的脚本仍然没有添加选项。
我已阅读有关向 select 菜单添加选项的信息,但我在那里找到的答案对我不起作用。我应该指出,这是 Joomla 网站 (v3.8) 的一部分,因为这可能会导致一些意外行为。
我有一个函数应该根据字符串 "id" 挑选出一个特定的 select 菜单,清除它的内容,然后用 [=27] 的元素重新填充它=]数组。
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)" 而不是添加,但我收到 "appendChild() is not a function" 形式的错误。我做了很多控制台日志以确定代码的所有部分都按预期工作,除了 "selectMenu.add(el);"
所以这只是一个菜鸟错误。我仔细看了看,发现 this related question,Matt 的最佳答案告诉我我需要使用 append(el)
而不是 add(el)
。我查看了文档,add
方法只影响 jQuery 对象,但实际上根本不影响 DOM,而 append
会。如果我要使用 add
我需要明确告诉 jQuery 对象刷新 DOM.
也有可能我使用 selectMenu.empty()
而不是 selectMenu.find('option').remove()
之类的东西仍然存在问题,但目前它不会导致任何错误。由于我的 select 元素只包含选项元素,我觉得这两个命令是一样的,但另一方面也许后者更好,因为它允许以后添加不同种类的元素。