我想创建一个响应性的下拉菜单.根据script.js中的编码,JOB-TITLE下拉菜单应该根据它们的字段显示我已经在列表中列出的标题.但是,输出不显示标题.它显示了数字.我已经附上了下面的图片.
以下是用于HTML和JS文件的代码片段:
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>