根據另一個選定的下拉列表更改下拉列表中的選項

Question

我正在嘗試執行此操作，您有一個下拉列表，然后根據您選擇的內容，下一個下拉列表將具有不同的選項。

我在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>

我遇到的問題是下一個下拉列表未顯示任何選項。 我已經瀏覽了很多遍代碼，但似乎仍然無法找出問題所在。 有人介意查看一下並讓我知道嗎？

非常感謝。

Answer 1

好的，讓我們一起做：

onchange="changeList()"在jsfiddle上使用onchange="changeList()" ，因為它會將您的代碼包裝到onclick處理程序中，並且changeList函數在外部作用域中不可見。
您應該使用diffList.value來檢測第一個選擇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

這是工作代碼（僅在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 個解決方案

解決方案1
1 2015-03-01 06:18:13

解決方案2
1 已采納 2015-03-01 06:20:54

解決方案3
0 2015-03-01 06:18:55

根據另一個選定的下拉列表更改下拉列表中的選項

問題描述

3 個解決方案

解決方案1 1 2015-03-01 06:18:13

解決方案2 1 已采納 2015-03-01 06:20:54

解決方案3 0 2015-03-01 06:18:55

解決方案1
1 2015-03-01 06:18:13

解決方案2
1 已采納 2015-03-01 06:20:54

解決方案3
0 2015-03-01 06:18:55