<body> <div class="sBox"> <select class="provice" id="proviceId"> <option value="">--省份--</option> </select> <select class="provice" id="city"> <option value="">--市--</option> </select> <select class=" provice" id="code"> <option>--邮编--</option> </select> </div> <script> var cityId = null; $.get("js/city.json", function(data, status) { for (var i = 0; i < data.城市代码.length; i++) { var name = (data.城市代码[i].省); $("#proviceId").append("<option value=" + i + ">" + name + "</option>"); }; $("#proviceId").change(function() { $("#city").html("<option>--市--</option>"); $("#code").html("<option>--邮编--</option>"); cityId = ($("#proviceId").val()); for (var i = 0; i < (data.城市代码[cityId].市).length; i++) { var city = (data.城市代码[cityId].市[i].市名); $("#city").append("<option value=" + i + ">" + city + "</option>"); } }); $("#city").change(function() { $("#code").html(""); var cityIda = ($("#city").val()); var code = (data.城市代码[cityId].市[cityIda].编码); $("#code").append("<option value=" + cityIda + ">" + code + "</option>"); }) }) </script> </body>
要点： option标签储存两个内容 value储存共同的数组下标 text存储内容