1、新建一个html文件，命名为test.html。
2、在test.html文件内，引入jquery.min.js库文件，成功加载该文件，才能使用jquery中的方法。
3、在test.html文件内，使用div标签创建一行文字，并设置其class为bg，主要用于下面通过该class来获得div对象。
4、在test.html文件内，在div标签内，通过style来设置div的背景颜色，定义其背景颜色为红色，文字颜色为白色。
5、在test.html文件内，使用button标签创建一个按钮，给button按钮绑定onclick点击事件，当按钮被点击时，执行editbg()函数。
6、在js标签内，创建一个editbg()函数，在函数内，使用$符通过div的class属性值（bg）来获得div对象，再使用css（）方法设置background属性为blue，即更改背景颜色为蓝色。
思路：实现这个方法主要用到了setAttribute方法
<title>通过选择项显示不同的结果</title><head>
<script type="text/JavaScript">
function showdiv()
{
var doc=document
var citytext=doc.getElementById("city").value
var div1=doc.getElementById("div1")
var div2=doc.getElementById("div2")
var div3=doc.getElementById("div3")
switch (citytext)
{
case "广州":
div1.setAttribute("style","display")
div2.setAttribute("style","display:none")
div3.setAttribute("style","display:none")
doc.getElementById("text1").value=citytext
break
case "南昌":
div1.setAttribute("style","display:none")
div2.setAttribute("style","display")
div3.setAttribute("style","display:none")
doc.getElementById("text2").value=citytext
break
case "沈阳":
div1.setAttribute("style","display:none")
div2.setAttribute("style","display:none")
div3.setAttribute("style","display")
doc.getElementById("text3").value=citytext
break
}
}
</script>
</head>
<body>
<select title="城市" id="city" onchange="showdiv()">
<option selected value="广州">广州</option>
<option value="南昌">南昌</option>
<option value="沈阳">沈阳</option>
</select>
<div id="div1" style="display:none" >您选择了广东的省会<input type="text" id="text1" value=""/></div>
<div id="div2" style="display:none" >您选择了江西的省会<input type="text" id="text2" value=""/></div>
<div id="div3" style="display:none" >您选择了辽宁的省会<input type="text" id="text3" value=""/></div>
</body>
</html></pre><pre class="html" name="code"> </pre><pre class="html" name="code"> </pre>
<pre></pre>
效果图：
定义和用法
setAttribute() 方法添加指定的属性，并为其赋指定的值。
<div id="abc"></div><script>
//你也没说一下php返回的数据结构究竟是怎样的。我假定是下面这样的:
var res=[
{a:1,b:2,c:23,d:34},
{a:231,b:2,c:39,d:14},
{a:1,b:2,c:453,d:784},
{a:981,b:1221,c:33,d:124},
{a:1,b:2,c:334,d:41243},
{a:12341,b:2,c:563,d:47},
{a:5121,b:1232,c:433,d:24}
]
document.getElementById("abc").innerHTML=res.map(function(o){
var html=""
html+='<div class="p-l-20 p-r-20 p-b-10 p-t-10 b-b b-grey">'
html+='<div class="pull-left">'
html+='<p class="text-important">'+o.a+'</p>'
html+='<p class="text-black">'+o.b+'</p>'
html+='</div>'
html+='<div class="pull-right">'
html+='<p class="text-black">'+o.c+'</p>'
html+='<span class="label label-success" style="vertical-align: bottom" >'+o.d+'</span>'
html+='</div>'
html+='<div class="clearfix"></div>'
html+='</div>'
return html
}).join("")
</script>
