根據選擇創建動態選擇表格

Question

我正在開發一個小型項目。

• 初始選擇表單有N個選項。
• 做出選擇會彈出另一個選擇表單，基於它是什麼。 例如：選擇一隻寵物：狗，貓（選擇狗），顯示狗的類型。

我這樣做使用JSON和JS，但我不知道我有正確的理解應該如何工作。

當我做出選擇時，我的思維過程是什麼......將該字符串發送給方法，然後在該JSON對象中搜索該字符串，然後提取該數據並創建新的選擇。

但是，它似乎沒有工作，我認爲我對這兩方面知識的缺乏阻礙了我在這裏的進步。

JSON

var obj = { 
    "option":[ 
     { 
     "text":"Choose Team", 
     "value":"choose" 
     }, 
     { 
     "text":"Eagles", 
     "value":"d" 
     }, 
     { 
     "text":"Falcons", 
     "value":"c" 
     }, 
     { 
     "text":"Browns", 
     "value":"b" 
     } 
    ], 
    "Eagles":[ 
     { 
     "text":"Choose Player", 
     "value":"Choose" 
     }, 
     { 
     "text":"Eagles", 
     "value":"d" 
     }, 
     { 
     "text":"Falcons", 
     "value":"c" 
     }, 
     { 
     "text":"Browns", 
     "value":"b" 
     } 
    ] 
}; 

然後創建基於選擇字符串

function changeSelect(select){ 
    var test = select.options[select.selectedIndex].text; 
    for(var i = 0; i < obj.test.length; i++){ 
     var objOption = document.createElement('option'); 
     objOption.setAttribute('value', obj.test[i].value); 
     objOption.appendChild(document.createTextNode(obj.test[i].text)); 
    }     
} 

一個新的選擇框的JS功能是否有一個原因obj.Eagles[i].text將創建我的新選擇形式與正確的價值觀但obj.test[i].text不起作用？ （文本是一個變量與字符串「老鷹」分配給它）

Answer 1

試試這個......我不得不稍微更改數據。

(function(select1, select2) { 
 
    select1 = document.getElementById(select1); 
 
    select2 = document.getElementById(select2); 
 
    var obj = { 
 
     "option": [{ 
 
      "text": "Choose Team", 
 
      "value": "choose" 
 
     }, { 
 
      "text": "Eagles", 
 
      "value": "Eagles" 
 
     }, { 
 
      "text": "Falcons", 
 
      "value": "Falcons" 
 
     }, { 
 
      "text": "Browns", 
 
      "value": "Browns" 
 
     }], 
 
     "Eagles": [{ 
 
      "text": "Choose Player", 
 
      "value": "Choose" 
 
     }, { 
 
      "text": "Agholor, Nelson", 
 
      "value": "d" 
 
     }, { 
 
      "text": "Ajirotutu, Seyi", 
 
      "value": "c" 
 
     }, { 
 
      "text": "Bradford, Sam", 
 
      "value": "b" 
 
     }] 
 
    }; 
 

 
    function populateSelect(select, data) { 
 
     for (var i = 0, objOption, element; element = data[i++];) { 
 
      objOption = document.createElement('option'); 
 
      objOption.value = element.value; 
 
      objOption.innerHTML = element.text; 
 
      select.appendChild(objOption); 
 
     } 
 
    } 
 

 
    function changeSelect2(event) { 
 
     var test = event.target.value, 
 
      innerArray = obj[test]; 
 
     select2.options.length = 0; 
 
     if (innerArray) { 
 
      populateSelect(select2, innerArray); 
 
     } 
 
    } 
 

 
    populateSelect(select1, obj.option); 
 
    select1.addEventListener("change", changeSelect2, false); 
 
})("select1", "select2");

<select id="select1"></select> 
 
<select id="select2"></select>