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不起作用？（Text是一个带有String＆＃34; Eagles＆＃34;赋值给它的变量）

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>

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

1 个答案: