这两天一直在看jquery实现二级联动于是自己结合网上的编写了一个小demo
代码如下:首先引入jquery
其次编写页面:
<body>
<select id="checkE">
<option value="">请选择种类</option>
</select>
<select id="checkFood">
<option>请选择食物</option>
</select>
</body>
然后编写js
<script type="application/javascript" src="../js/jquery-1.9.1.min.js"></script>
<script type="application/javascript">
$(function(){
//页面加载完毕后开始执行的事件
var checkE='{"水果":["苹果","香蕉","橘子"],"蔬菜":["白菜","豆芽","土豆"]}';
var kind=eval('('+checkE+')');//计算某个字符串,并执行其中的的 JavaScript 代码
for (var key in kind)
{
$("#checkE").append("<option value='"+key+"'>"+key+"</option>");
}
$("#checkE").change(function(){
var checkEval=$(this).val();
$("#checkFood").html('<option value="">请选择食物</option>');
for(var k in kind[checkEval])
{
var now_food=kind[checkEval][k];
$("#checkFood").append('<option value="'+now_food+'">'+now_food+'</option>');
}
});
});
</script>