create a dynamic select with options in Javascript

Question

Hello I have tried to create a dynamic Javascript select with their options, but it isn't works :(. I have try it with my json-Array but in the console comes this following error: "Uncaught ReferenceError: $ is not defined at test.js:4" my 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);
}
}

my 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>

This error indicates the absence of plugin **jquery**. Connect it inside the `...` tag by inserting this - ` `. — s.kuznetsov, Jan 19 '21 at 09:41
Does this answer your question? [Uncaught ReferenceError: $ is not defined?](https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined) — s.kuznetsov, Jan 19 '21 at 09:42
Not defined in `test.js` - this may mean that you register the plugin `jquery` connection after connecting `test.js`. Try to write the path to `jquery` first, and then the path to `test.js`. — s.kuznetsov, Jan 19 '21 at 09:50

score 0 · Answer 1 · answered Jan 19 '21 at 09:40

0

You are selecting document by jQuery. But you don't have linked jQuery to your head.

answered Jan 19 '21 at 09:40

Daniel Bednář

132
7

Dinesh s · Answer 2 · 2021-01-19T10:18:45.097

0

Try by moving the script test.js file to below the jquery cdn or move the file to bottom of html after the closing body tag and before the html closing tag

if it not work try with javascript without jquery

reference : https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_select_create

edited Jan 19 '21 at 10:18

answered Jan 19 '21 at 09:59

Dinesh s

313
4
19

create a dynamic select with options in Javascript

2 Answers2