Question

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

我的代码在jsfiddle

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

我遇到的问题是下一个droplist没有显示任何选项。我多次查看我的代码，但我似乎无法找出它的错误。有人会介意看着它并让我知道吗？

非常感谢。

Answer 1

好的，让我们这样做：

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

http://jsfiddle.net/h3hbovar/4/

Answer 2

以下是working code（仅测试了ib Chrome）。

一个问题就在这里 - for 循环不会在JS中创建嵌套作用域，因此它会遮蔽全局变量难度

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

Answer 3

我认为这里的主要问题是函数中的javascript范围。如果在函数的上下文之外定义difficulty，则需要通过附加到window

将其定义为全局

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

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

3 个答案: