<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.11.3.js"></script>
<script>
var province = ["黑龙江","吉林","辽宁"];
var cities = [
["哈尔滨","齐齐哈尔","牡丹江"],
["长春","吉林","四平"],
["沈阳","大连","铁岭"]
];
$(function(){
//1、构建 <option>请选择</option>，并增加到selProvince中
var $opSel = $("<option>请选择</option>");
$opSel.attr("value","-1");
$("#selProvince").append($opSel);
//2、循环遍历 province 数组，取出每一个元素构建成option并增加到selProvince中
for(var i=0;i<province.length;i++){
var $op = $("<option></option>");
$op.html(province[i]);
$op.attr("value",i);
$("#selProvince").append($op);
}
//3、为selProvince绑定change事件
$("#selProvince").change(function(event){
console.log($(event.target));
//判断是否存在 #selCity 元素
if($("#selCity").length > 0){
$("#selCity").remove();
}
//如果选项不是 请选择(-1) 的话
if(this.value != -1){
//1、创建一个 <select></select>，并设置id
var $sel = $("<select></select>");
$sel.attr("id","selCity");
//2、将$sel加载到网页上
//$("body").append($sel);
$(this).after($sel);
//3、从 cities 数组中获取对应的数据并构建 option 添加到 $sel 上
//console.log(cities[this.value]);
for(var i=0;i<cities[this.value].length;i++){
var $opC=$("<option></option>");
$opC.attr("value",i);
$opC.html(cities[this.value][i]);
$sel.append($opC);
}
}
});
});
</script>
</head>
<body>
<select id="selProvince"></select>
</body>
</html>
2972
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
