在 Javascript 中使用选项创建动态选择答案

【问题标题】：create a dynamic select with options in Javascript在 Javascript 中使用选项创建动态选择
【发布时间】：2021-04-23 14:14:38
【问题描述】：

您好，我尝试使用他们的选项创建一个动态 Javascript 选择，但它不起作用:(。我已经用我的 json-Array 尝试过，但在控制台中出现以下错误： “未捕获的 ReferenceError：$ 未定义在 test.js:4" 我的js：

let data=[{"short":"vw","full":"volkswagen"},
{"short":"mrcs","full":"mercedes"}];

$(document).ready(function(){
    generateOptions(data);
});

function generateOptions(data){
var selectList = document.getElementById('mySelect');

//Create and append the options
for (var i = 0; i < data.length; i++) {
    var option = document.createElement("option");
    option.value = data[i].short;
    option.text = data[i].full + " ("+data[i].short+")";
    selectList.appendChild(option);
}
}

我的html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="test.js"></script>
    <link rel="stylesheet" href="test.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
</head>
<body>
  <select id="mySelect">

  </select>
</body>
</html>

【问题讨论】：

这个错误表示没有插件jquery。通过插入 - <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 将其连接到 <head>...</head> 标签内。
这能回答你的问题吗？ Uncaught ReferenceError: $ is not defined?
未在test.js 中定义——这可能意味着您在连接test.js 后注册了插件jquery 连接。尝试先写jquery的路径，再写test.js的路径。
@s.kuznetsov 谢谢这解决了我的问题:)
很高兴为您提供帮助，我的朋友。

标签： javascript html select dynamic dropdown

【解决方案1】：

您正在通过 jQuery 选择文档。但是您没有将 jQuery 链接到您的头上。

【讨论】：

【解决方案2】：

尝试将脚本 test.js 文件移动到 jquery cdn 下方，或者将文件移动到 html 底部的 body 结束标记之后和 html 结束标记之前

如果它不起作用，请尝试使用不带 jquery 的 javascript

参考：https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_select_create

【讨论】：