Json下拉列表错误

时间:2013-08-25 08:51:07

标签: javascript html json html-select

Iam newbi on json code如果有人可以帮我解决这个错误,我将不胜感激: 我有车型+年+存款+价格

当用户首次点击模型而不是选择年份和存款显示每月金额还款时。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Cars</title>
<link href="css/cakeform.css" rel="stylesheet" type="text/css" />
<script>
var prices = {
'model' : 'Skoda' {
'1' : {
    '12300' : '959',
    '13000' : '892',
    '13500' : '844',
    '19000' : '317'
},
'2' : {
    '12300' : '542',
    '13000' : '504',
    '13500' : '477',
    '19000' : '179'
},
'3' : {
    '12300' : '403',
    '13000' : '375',
    '13500' : '355',
    '19000' : '133'
}
};
    'Tiida' {
'1' : {
    '12300' : '955',
    '13000' : '892',
    '13500' : '844',
    '19000' : '317'
},
'2' : {
    '12300' : '555',
    '13000' : '504',
    '13500' : '477',
    '19000' : '179'
},
'3' : {
    '12300' : '455',
    '13000' : '375',
    '13500' : '355',
    '19000' : '133'
}
};
};
  onload = function(){
var f = document.booklets;
var model = f.model;
var qtyEl = f.qty;
var pagesEl = f.pages;
var priceEl = document.getElementById('price');
f.qty.onchange = f.pages.onchange = f.model.onchange = function(){
    var qty   = qtyEl[qtyEl.selectedIndex].value;
    var model = modelEl[modelEl.selectedIndex].value;
    var pages = pagesEl[pagesEl.selectedIndex].value
    priceEl.innerHTML = prices[pages][qty][model];
};
f.qty.onchange();//initialise price field for whatever values are selected on page   load
 };
 </script>
 </head>
 <body>

 <fieldset>
 <legend>Cars</legend>
 <form name="booklets" method="" action="">
<div>Select Model:
<select class="selectClass" name="model">
    <option value="Skoda">Skoda</option>
    <option value="Tiida">Tiida</option>
    <option value="Tyota">Toyota</option>
</select>
<div>Select Year:
<select class="selectClass" name="pages">
    <option value="1">1 Year</option>
    <option value="2">2 Years</option>
    <option value="3">3 Years....</option>
</select>
<br><br>Select Deposit:
<select class="selectClass" name="qty">
    <option value="12300">$12300</option>
    <option value="13000">$13000</option>
    <option value="13500">$13500</option>
</select>
   </div>
   <div><br>Monthly Payment: <font color="blue" size=7>$ <span id="price"></span> </font>       </div>
  </form>
 </fieldset>
 </body>
 </html>

提前感谢:

1 个答案:

答案 0 :(得分:1)

您的JSON无效,因此必须修复。您应该使用"代替'来获取有效的JSON,并使用类似JSONLint的内容来检查错误的逗号和括号。

修正了JSON变量:

var prices = {
    "Skoda": {
        "1": {
            "12300": "959",
            "13000": "892",
            "13500": "844",
            "19000": "317"
        },
        "2": {
            "12300": "542",
            "13000": "504",
            "13500": "477",
            "19000": "179"
        },
        "3": {
            "12300": "403",
            "13000": "375",
            "13500": "355",
            "19000": "133"
        }
    },
    "Tiida": {
        "1": {
            "12300": "955",
            "13000": "892",
            "13500": "844",
            "19000": "317"
        },
        "2": {
            "12300": "555",
            "13000": "504",
            "13500": "477",
            "19000": "179"
        },
        "3": {
            "12300": "455",
            "13000": "375",
            "13500": "355",
            "19000": "133"
        }
    }
};

然后你的代码中有一两个错字,而你正在错误地访问JSON数据。您必须确保根据结构中的层次结构访问它。在这里,这意味着prices[model][pages][qty]

修正onload功能:

window.onload = function() {
    var f = document.booklets;
    var modelEl = f.model;
    var qtyEl = f.qty;
    var pagesEl = f.pages;
    var priceEl = document.getElementById('price');
    f.qty.onchange = f.pages.onchange = f.model.onchange = function () {
        var qty = qtyEl[qtyEl.selectedIndex].value;
        var model = modelEl[modelEl.selectedIndex].value;
        var pages = pagesEl[pagesEl.selectedIndex].value;
        priceEl.innerHTML = prices[model][pages][qty];
    };
    //initialise price field for whatever values are selected on page   load
    f.qty.onchange(); 
};

DEMO:http://jsfiddle.net/eGQr2/