服务器交互，从服务器获取数据，数据的处理方式，将json转换成字符串操作.
1、字符串拼接
2、数组遍历
3、节点获取
4、json
1、构造json数据,每一个json中就是一个商品
2、遍历数组,取出每一个商品信息
3、拼接字符串
4、获取节点，追加到页面
数据如果不是定死的就用ajax如果是定死的就用数据
这是我写的一个例子，数据是定死的，我这里只有两个下拉列表，三个的其实道理一样
<html>
<head>
<meta http-equiv=content-type content="text/htmlcharset=GBK">
<script language="JavaScript" type="text/javascript">
<!--
// 初始时定义相关数组
var provinces = ["吉林", "辽宁", "黑龙江", "江苏", "山东"]
var jiLin = ["长春", "吉林", "白城", "白山"]
var liaoNing = ["沈阳", "大连", "鞍山"]
var heiLongJiang = ["哈尔滨", "佳木斯", "牡丹江", "齐齐哈尔"]
var jiangSu = ["南京", "苏州", "无锡", "常州", "徐州"]
var shanDong = ["济南", "烟台", "青岛", "威海"]
var allProvinces = ["", jiLin, liaoNing, heiLongJiang, jiangSu, shanDong]
// 取得用户选择的省
function selectProvince(obj){
var province = obj.value
if(parseInt(province) >= allProvinces.length)
return
addCity(allProvinces[province])
}
// 向城市复选框中添加数据
function addCity(province){
var citys = document.all.city
citys.options.length = 1
document.all.picture.src = "images\\城市.jpg"
if(province == "") return
for(var i=0i<province.lengthi++){
citys.add(new Option(province[i], i+1, false, false))
}
}
// 选择城市列出介绍
function selectCity(obj){
var city = obj.value
document.all.picture.src = "images\\" + obj.options[parseInt(city)].text + ".jpg"
}
-->
</script>
</head>
<body>
<!--province-->
<select id="sheng" onchange="selectProvince(this)">
<option value="0" selected = true>选择省</option>
</select>
<!--city-->
<select id="city" onchange="selectCity(this)">
<option value="0" selected = true>城市</option>
</select>
<br>
<!--picture-->
<table border=15 style=border-style:ridge width=360 height=300>
<tr valign=top>
<td>
<img src="images\\城市.jpg" id="picture" name="picture" width=360 height=300/>
</td>
</tr>
</table>
<script language="JavaScript" type="text/javascript">
<!--
// 初始化省
var obj = document.all.sheng
for(i=0 i<5 i++){
obj.add(new Option( provinces[i], i + 1, false, false))
}
-->
</script>
</body>
</html>
