Question

我有一个简单的表单，提交所选位置地址的详细信息。在提交之前，我想允许用户预览将要发送的地址。地址存储在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错误中的对象，因为该功能没有显示任何内容......你能帮忙吗？

Answer 1

首先，您没有在循环中初始化var i到0。

其次，（在你的小提琴中）你使用getElementById - 应该是document.getElementById

第三，（在你的小提琴中）有json.JSONAddress - 它应该只有JSONAddress

here

Answer 2

问题在于i循环的变量for，初始化 0 。

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>

Answer 3

首先，您应该始终初始化variable，否则该值将为undefined，并使用document.getElementById代替getElementById。

访问JSON对象详细信息

3 个答案: