Javascript 如何将列表的innerText/innerContent设置为多维数组的内容？

我对JavaScript相当陌生，所以如果这段代码很糟糕，请原谅我。我要做的是让用户从表单中选择一个州，然后返回5个城市。这就是我目前掌握的密码

带引导类的html

<div class="row row1">
<div class="col-md6>
<div class="input-group">
<form>
 <select class="form-control" name="states" id="uStates">
  <option value="AL">Alabama </option>
  <option value="AK">Alaska </option>
  <option value="AZ">Arizona </option>
  <option value="AR">Arkansas</option> 
  <option value="CA">California</option>  
 </select>
</form>
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" placeholder="60000">
  <span class="input-group-addon">.00</span>
  <span class="input-group-btn">
  <button class="btn btn-default" type="button id="uBtn" onClick="populateCities">GO!</button>
  </span>
</div>
</div>
</div>
<div class="row row2">
<div class="col-md-2 col-md-offset-3">
 <ul class="list-group cities">
  <li class="list-group-item" id="city1">1</li>
  <li class="list-group-item" id="city2">2</li>
  <li class="list-group-item" id="city3">3</li>
  <li class="list-group-item" id="city4">4</li>
  <li class="list-group-item" id="city5">5</li>
 </ul>
</div>
 </div>   

走！

1
2
3
4
5

JS

var stateData=[
[“伯明翰”、“蒙哥马利”、“亨茨维尔”、“移动”、“塔斯卡卢萨”]，
[“Anchorage”、“Juneau”、“Fairbanks”、“Ketchikan”、“Sitea”]，
[“凤凰城”、“图森”、“斯科特代尔”、“梅萨”、“坦佩”]，
[“小石城”、“费耶特维尔”、“温泉”、“史密斯堡”、“本顿维尔”]，
[“洛杉矶”、“旧金山”、“圣地亚哥”、“萨克拉门托”、“奥克兰”]，
];
函数populateCities（）{
var state=document.formName.States.options；
对于（var i=0；i1），您的循环完全没有做任何事情。如果要循环，请不要硬编码索引

2） 将innerContent（）更改为innerHTML=stateData[i]

3） html标记不使用camelCase

4） html中缺少多个结束引号


//将单击侦听器移动到您的代码
var btn=document.getElementById（“uBtn”）；
btn.addEventListener（'click'，populateCities）；
var btnD=document.getElementById（“uBtnDyn”）；
btnD.addEventListener（'click'，populateCitiesDynamic）；
//获取对状态选择器的引用
var states=document.getElementById（“uStates”）；
//将stateData更改为对象，以便可以引用该状态
var状态数据={
AL:[“伯明翰”、“蒙哥马利”、“亨茨维尔”、“莫比尔”、“塔斯卡卢萨”]，
AK:[“安克雷奇”、“朱诺”、“费尔班克斯”、“凯奇坎”、“斯泰亚”]，
亚利桑那州：[“凤凰城”、“图森”、“斯科特代尔”、“梅萨”、“坦佩”]，
AR:[“小石城”、“费耶特维尔”、“温泉”、“史密斯堡”、“本顿维尔”]，
CA:[“洛杉矶”、“旧金山”、“圣地亚哥”、“萨克拉门托”、“奥克兰”]，
};
函数populateCities（）{
//获取当前状态的城市
var cities=stateData[states.value]
console.log（城市）
//环城
对于（变量i=0；i


阿拉巴马州
阿拉斯加州
亚利桑那州
阿肯色州
加利福尼亚
$
.00
走！
动起来！

1
2
3
4
5

1）您的循环完全没有做任何事情如果要循环，请不要硬编码索引

2） 将innerContent（）更改为innerHTML=stateData[i]

3） html标记不使用camelCase

4） html中缺少多个结束引号


//将单击侦听器移动到您的代码
var btn=document.getElementById（“uBtn”）；
btn.addEventListener（'click'，populateCities）；
var btnD=document.getElementById（“uBtnDyn”）；
btnD.addEventListener（'click'，populateCitiesDynamic）；
//获取对状态选择器的引用
var states=document.getElementById（“uStates”）；
//将stateData更改为对象，以便可以引用该状态
var状态数据={
AL:[“伯明翰”、“蒙哥马利”、“亨茨维尔”、“莫比尔”、“塔斯卡卢萨”]，
AK:[“安克雷奇”、“朱诺”、“费尔班克斯”、“凯奇坎”、“斯泰亚”]，
亚利桑那州：[“凤凰城”、“图森”、“斯科特代尔”、“梅萨”、“坦佩”]，
AR:[“小石城”、“费耶特维尔”、“温泉”、“史密斯堡”、“本顿维尔”]，
CA:[“洛杉矶”、“旧金山”、“圣地亚哥”、“萨克拉门托”、“奥克兰”]，
};
函数populateCities（）{
//获取当前状态的城市
var cities=stateData[states.value]
console.log（城市）
//环城
对于（变量i=0；i


阿拉巴马州
阿拉斯加州
亚利桑那州
阿肯色州
加利福尼亚
$
.00
走！
动起来！

1
2
3
4
5

我对您的代码做了一些更改，希望这是您想要的

我只是想补充一点，使用
onclick=populateCities
是不好的做法。您应该从javascript
document.getElementById（“uBtn”）连接事件。addEventListener（“单击”，populateCities，false）；

另外，
document.formName.States.selectedIndex；
是您要查找的内容。您不需要
var stateData = [ 
  ["Birmingham", "Montgomary", "Huntsville", "Mobile", "Tuscaloosa"],
  ["Anchorage", "Juneau", "Fairbanks", "Ketchikan", "Sitea"],
  ["Phoenix","Tucson","Scottdale","Mesa","Tempe"],
  ["Little Rock","Fayetteville","Hot Springs","Fort Smith","Bentonville"],
  ["Los Angeles", "San Francisco","San Diego","Sacramento","Oakland"],
 ];

function populateCities(){

 var state=document.formName.States.options;
 for (var i=0; i<state.length; i++){
    state[i]=stateData[i]
    for (var j=0; j<5; j++){
        document.getElementById("city1").innerContent(stateData[0]);
        document.getElementById("city2").innerContent(stateData[1]);
        document.getElementById("city3").innerContent(stateData[2]);
        document.getElementById("city4").innerContent(stateData[3]);
        document.getElementById("city5").innerContent(stateData[4]);
    }
 }
}