我想创建一个响应性的下拉菜单.根据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>

推荐答案

for...of个接缝比for...in个接缝更适合这种情况.如前所述,如果与数组一起使用,for...in将返回索引.

更新

for (var y in jobInfo[this.value]) {
    jobTitle.options[jobTitle.options.length] = new Option(y, y);
}

到下面应该可以做到这一点

for (var y of jobInfo[this.value]) {
    jobTitle.options[jobTitle.options.length] = new Option(y, y);
}

Javascript相关问答推荐

使用JavaScript单击上一个或下一个特定按钮创建卡滑动器以滑动单个卡

如何使用Echart 5.5.0创建箱形图

如何在表格上拥有水平滚动条,在正文页面上拥有垂直滚动条,同时还对html表格的标题使用位置粘性?

GrapeJS -如何保存和加载自定义页面

如何通过使用vanilla JS限制字体大小增加或减少两次来改变字体大小

为什么123[';toString';].long返回1?

React.Development.js和未捕获的ReferenceError:未定义useState

用于在路径之间移动图像的查询

有条件重定向到移动子域

邮箱密码重置链接不适用于已部署的React应用程序

背景动画让网站摇摇欲坠

有没有办法通过使用不同数组中的值进行排序

react 路由DOM有条件地呈现元素

使用Perl Selify::Remote::Driver执行Java脚本时出错

如何使用fltter_js将对象作为参数传递给javascrip?

material UI自动完成全宽

将字符串解释为数字;将其重新编码为另一个基数

JS/css:将数字输入的S函数和可调整大小的元素S函数绑定在一起

使用JAVASCRIPT-使用If和Else If多次判断条件-使用JAVASRIPT对象及其属性

使用JavaScript或PHP从div ID值创建锚标记和链接