2015-10-07 109 views
1

我有一个简单的表单提交所选位置的地址的详细信息。在提交之前,我希望允许用户预览将要发送的地址。地址存储在JSON对象中。我有以下代码:访问JSON对象的详细信息

HTML:

<html> 
<form action="something.asp" > 
<select id="selectAddress"> 
    <option value="Cheonan2">Cheonan 2</option> 
    <option value="Cheonan3">Cheonan 3</option> 
</select> 
<input type="submit"/> 
</form> 
<input type="button" value="Display addresses" onClick="showAddress()"/><br> 

<span id="addressField1"></span> 
<span id="addressField2"></span> 
<span id="addressField3"></span> 
</html> 

JS:

<script> 
function showAddress() 
{ 
    var JSONAddress = 
     [ 
      {   "id":"Cheonan2", 
         "Field1": "96, 3Gongdan1-ro", 
         "Field2": "Seobuk-gu, Cheonan-si", 
         "Field3": "Chungcheongnam-do, 31093, Korea" 
      }, 

      { 
         "id":"Cheonan3", 
         "Field1": "80, 3Gongdan6-ro,", 
         "Field2": "Seobuk-gu, Cheonan-si,", 
         "Field3": "Chungcheongnam-do, 31085, Korea" 
      } 

     ]; 


    var e=document.getElementById("selectAddress"); 
    var selectedAddress = e.options[e.selectedIndex].value; 

    for (var i;i<JSONAddress.length;i++){ 
     if (JSONAddress[i].id===selectedAddress){ 
            document.getElementById('addressField1').innerHTML=JSONAddress[i].Field1; 
       document.getElementById('addressField2').innerHTML=JSONAddress[i].Field2; 
       document.getElementById('addressField3').innerHTML=JSONAddress[i].Field3; 

      } 

     } 

} 
</script> 

我可能访问的对象JSONAddress错误的,因为该功能不显示任何东西......可以你帮忙?

+0

你能在小提琴上提供代码吗? – amoeba

回答

0

的问题是具有可变ifor循环这是不初始化到。

function showAddress() 
 
{ 
 
    var JSONAddress = 
 
     [ 
 
      {   "id":"Cheonan2", 
 
         "Field1": "96, 3Gongdan1-ro", 
 
         "Field2": "Seobuk-gu, Cheonan-si", 
 
         "Field3": "Chungcheongnam-do, 31093, Korea" 
 
      }, 
 

 
      { 
 
         "id":"Cheonan3", 
 
         "Field1": "80, 3Gongdan6-ro,", 
 
         "Field2": "Seobuk-gu, Cheonan-si,", 
 
         "Field3": "Chungcheongnam-do, 31085, Korea" 
 
      } 
 

 
     ]; 
 

 

 
    var e=document.getElementById("selectAddress"); 
 
    var selectedAddress = e.options[e.selectedIndex].value; 
 
    for (var i=0;i<JSONAddress.length;i++){ 
 
     if (JSONAddress[i].id===selectedAddress){ 
 
            document.getElementById('addressField1').innerHTML=JSONAddress[i].Field1; 
 
       document.getElementById('addressField2').innerHTML=JSONAddress[i].Field2; 
 
       document.getElementById('addressField3').innerHTML=JSONAddress[i].Field3; 
 

 
      } 
 

 
     } 
 

 
}
<html> 
 
<form action="something.asp" > 
 
<select id="selectAddress"> 
 
    <option value="Cheonan2">Cheonan 2</option> 
 
    <option value="Cheonan3">Cheonan 3</option> 
 
</select> 
 
<input type="submit"/> 
 
</form> 
 
<input type="button" value="Display addresses" onClick="showAddress()"/><br> 
 

 
<span id="addressField1"></span> 
 
<span id="addressField2"></span> 
 
<span id="addressField3"></span> 
 
</html>

2

首先,你没有初始化var i0在循环。

二,(在你的提琴)你用getElementById - 它应该是document.getElementById

三,(在你的提琴)有json.JSONAddress - 它应该是唯一的JSONAddress

Working Fiddle

0

首先,您应始终初始化variable,否则值将为undefined并使用document.getElementById而不是getElementById