Javascript 根据另一个选定下拉列表更改下拉列表中的选项_Javascript_Html

Javascript 根据另一个选定下拉列表更改下拉列表中的选项

javascript html

Javascript 根据另一个选定下拉列表更改下拉列表中的选项,javascript,html,Javascript,Html,我正在尝试做你有一个下拉列表，根据你选择，下一个下拉列表将有不同的选项我有密码我遇到的问题是，下一个液滴列表没有显示任何选项。我已经检查了我的代码很多次，但我仍然无法找出它的错误。有人能看一下让我知道吗非常感谢。好的，我们开始吧：您不应该在JSFIDLE上使用onchange=changeList，因为它将代码包装到onclick处理程序中，并且changeList函数在外部范围中不可见。您应该使用diffList.value来检测第一个选择框中当前选择的值：var selectDif

我正在尝试做你有一个下拉列表，根据你选择，下一个下拉列表将有不同的选项

我有密码

我遇到的问题是，下一个液滴列表没有显示任何选项。我已经检查了我的代码很多次，但我仍然无法找出它的错误。有人能看一下让我知道吗

非常感谢。

好的，我们开始吧：

您不应该在JSFIDLE上使用onchange=changeList，因为它将代码包装到onclick处理程序中，并且changeList函数在外部范围中不可见。您应该使用diffList.value来检测第一个选择框中当前选择的值：var selectDiff=diffList.value；不要命名新选项变量“难度”-它会覆盖外部范围中的难度变量。将其命名为option，例如：var option=newoptiondiff[i]，i；从JS:diffList.addEventListener'change'，changeList添加diffList的事件侦听器

我认为这里的主要问题是javascript在函数中的作用域。如果难度是在函数的上下文之外定义的，则需要通过附加到窗口将其定义为全局难度

这里只测试了ib Chrome

这里有一个问题-for循环没有在JS中创建嵌套作用域，因此它隐藏了全局变量的难度

<!DOCTYPE html>
<html>
<body>   

<select id="diffList" onchange="changeList()"> 
  <option value="">-- Difficulty --</option> 
  <option value="1">Easy</option> 
  <option value="2">Medium</option> 
  <option value="3">Difficult</option> 
</select> 

<select id="numbList"></select> 

<script>
var difficulty = {};
difficulty['1'] = [1,2,3];
difficulty['2'] = [4,5,6];
difficulty['3'] = [7,8,9];

function changeList() {
    var diffList = document.getElementById("diffList");
    var numbRange = document.getElementById("numbList");
    var selectDiff = diffList.options[diffList.selectIndex].value;
    while(numbRange.options.length)
    {
        numbRange.remove(0);
    }
    var diff = difficulty[selectDiff];
    if(diff)
    {
        var i;
        for(i = 0; i < diff.length; i++)
        {
            var difficulty = new Option(diff[i], i);
            numbRange.options.add(difficulty);
        }
    }
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>   

<select id="diffList" onchange="changeList()"> 
  <option value="">-- Difficulty --</option> 
  <option value="1">Easy</option> 
  <option value="2">Medium</option> 
  <option value="3">Difficult</option> 
</select> 

<select id="numbList"></select> 

<script>
window.difficulty = {};
window.difficulty['1'] = [1,2,3];
window.difficulty['2'] = [4,5,6];
window.difficulty['3'] = [7,8,9];

function changeList() {
    var diffList = document.getElementById("diffList");
    var numbRange = document.getElementById("numbList");
    var selectDiff = diffList.options[diffList.selectedIndex].value;
    while(numbRange.options.length)
    {
        numbRange.remove(0);
    }
    var diff = window.difficulty[selectDiff];
    if(diff)
    {
        var i;
        for(i = 0; i < diff.length; i++)
        {
            var difficulty = new Option(diff[i], i);
            numbRange.options.add(difficulty);
        }
    }
}
</script>

</body>
</html>

for(i = 0; i < diff.length; i++) {
    var difficulty = new Option(diff[i], i);
    ...