I want to create a responsive dropdown menu. Based on the coding in script.js, the job-title dropdown should display the title that I have been listed in the list according to their field. But, the output doesn’t display the title. It shows number. I have attached the image below.
Here is the following code for HTML and JS file code snippet:
var jobInfo = {
"Information Technology and Software Development": ["Senior Frontend Developer", "Data Processing Specialist", "Java Developer"],
"Digital Marketing": ["Digital Marketing Web Specialist", "Video Editor", "Graphic Designer"],
"Finance": ["Financial Analyst-SSC", "Accountant", "Specialist, Business Finance (APAC)"]
}
window.onload = function() {
var jobField = document.getElementById("job-field");
var jobTitle = document.getElementById("job-title");
for (var x in jobInfo) {
jobField.options[jobField.options.length] = new Option(x, x);
}
jobField.onchange = function() {
//empty Chapters- and Topics- dropdowns
jobTitle.length = 1;
//display correct values
for (var y in jobInfo[this.value]) {
jobTitle.options[jobTitle.options.length] = new Option(y, y);
}
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UPLOAD FILE</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
</head>
<body>
<div class="wrapper2">
<nav class="navbar">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">UPLOAD FILE</a></li>
<li><a href="#">DETAILS</a></li>
<li><a href="#">CLASSIFICATION</a></li>
<li><a href="#">SHORTLISTED</a></li>
<li><a href="#">ANALYSIS</a></li>
</ul>
</nav>
<div class="job">
<h2>Choose job's field: </h2>
<select name="job-field" id="job-field">
<option value="" selected="selected">Select field</option>
</select>
<br><br>
<h2>Choose job's title: </h2>
<select name="job-title" id="job-title">
<option value="" selected="selected">Select title</option>
</select>
</div>
<div class="upload">
<h2>Upload a CSV file</h2>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<br><br>
<button type="submit">Upload</button>
</form>
</div>
</div>
<script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>
2
Answers
You are using the for … in loop, which is iterating over properties in an object. Therefore the variable you are using inside the for loop is holding the property name.
In your first loop it’s working, because the objects property is also your jobtitle.
In your second loop, you are looping over an array which holds your job titles. This array is also an object, where the "property" is your arrays index. So your variable
yinside your for loop only holds the index for your value, which is 0, 1, 2 …In order to access the actual value you have to use
jobInfo[this.value][y]So the new option you are adding need to change from
new Option(y, y);tonew Option(jobInfo[this.value][y], y);Fixed code below
The for…of seams more suitable for this case instead of for…in. As explained,
for...inreturns the index if used with an Array.Updating
to below should do the trick