Создание динамических форм выбора на основе выбора

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" 
     } 
    ] 
}; 

И тогда функция JS, которая создает новый блок выбора на основе строки выбора

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)); 
    }     
} 

Есть ли причина 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>