根据选择创建动态选择表格

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>