|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquuery_12_demo</title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var citys = {
/*键是城市的id*/
"1":
{
"name":"北京",
"children":
[
{
"id":"4",
"name":"朝阳区"
},
{
"id":"5",
"name":"昌平区"
},
{
"id":"6",
"name":"海淀区"
},
{
"id":"7",
"name":"西城区"
}
]
},
"2":
{
"name":"河南",
"children":
[
{
"id":"8",
"name":"郑州市"
},
{
"id":"9",
"name":"开封"
},
{
"id":"10",
"name":"南阳"
}
]
},
"3":
{
"name":"河北",
"children":
[
{
"id":"11",
"name":"石家庄"
},
{
"id":"12",
"name":"保定"
}
]
}
};
$(function(){
console.info("====");
/* Jquery动态的生成数据
先准备一份静态的数据,
再写动态的数据
*/
var option = "<option>请选择</option>" ;
for(var temp in citys)
{
/*
citys[temp]:是Object,所以可以直接取数据
*/
console.log(temp + "==测试数据==" + citys[temp][name] + "==>" + citys[temp].name);
/* 字符串加上变量,要打断
System.out.println("toString:" + obj);
*/
option = option + "<option value='"+ temp +"'>"+ citys[temp].name +"</option>";
}
/*
取id为prov的select标签
html:就是为开始标签和结束标签中间赋值
*/
$("#prov").html(option);
/* 为第一级菜单增加一个下拉框的事件,叫做:下拉框选项更改的事件(onchange) */
$("#prov").change(function()
{
/* 指的是整个select内容
select标签包装的Jquery对象,val()方法指的是选中的option;
如果选中的option有value属性,获取的就是value属性,
如果没有value属性,那获取的就是option开始标签和结束标签中间的内容;
*/
console.log($(this).html() + "==change===" + $(this).val());
/* 获取选中的一级下拉框中间的value值
通过此value值到我们的数据(citys)中找对应的二级菜单*/
var selectValue = $(this).val() ;
/* js中对象.属性(不能是变量)
如果js中的属性,非要变量取呢?那就要使用:对象[属性]
*/
/* citys.prov_1.children:它是一个数组
循环数组
数组就是一个容器,容器里面放的是什么呢?{},就是一个对象
*/
var childOption = "" ;
for(var i = 0 ; i < citys[selectValue].children.length ; i ++)
{
var cityTemp = citys[selectValue].children[i] ;
console.info(cityTemp.id + "==二级City==" + cityTemp.name);
childOption = childOption + "<option value='"+ cityTemp.id +"'>"+ cityTemp.name +"</option>";
}
/* 为二级菜单赋值了 */
$("#city").html(childOption);
});
});
</script>
</head>
<body>
省
<select name="prov" id="prov">
<!-- <option value="">北京</option>
<option value="">河南</option>
<option value="">河北</option> -->
</select>
市
<select name="city" id="city">
</select>
</body>
</html>
|
