1.仿照QQ列表分组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<link rel="stylesheet" href="css/new_file.css" />
<!--<script>
function aa(){
//将所有div节点中的disp值变为none
var divDivs = document.getElementsByTagName("div");
for(var i=0;i<divDivs;i++){
divDivs[i].style.display = "none";
}
}
aa();
</script>-->
<!--
1.点击分组，展开当前列表
2.第几分组，在当前分组展开之前，先关闭其他分组
3.点击分组判断当前分组
3.1，所示当前分组是展开的，则关闭
3.2如果当前分组是关闭的，点击后，先关闭其他分组，再展开这个分组
-->
<script>
function openDiv(thisobj){
var div = thisobj.parentNode.getElementsByTagName("div")[0];
if(div.style.display=="block"){
div.style.display = "none";
}else{
//将所有div节点中的disp值变为none
var divDivs = document.getElementsByTagName("div");
for(var i=0;i<divDivs.length;i++){
divDivs[i].style.display = "none";
}
//柑橘被点击的分组，获取分组内的div
var div = thisobj.parentNode.getElementsByTagName("div")[0];
div.style.display = "block";
}
}
</script>
<body>
<table>
<tr>
<td>
<a href="#" onclick="openDiv(this)">君王好友</a>
<div>
秦始皇<br />
刘邦<br />
李世民<br />
康熙<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="#" onclick="openDiv(this)" >aa君王好友</a>
<div>
秦始皇<br />
刘邦<br />
李世民<br />
康熙<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="#" onclick="openDiv(this)" >君王好友</a>
<div>
秦始皇<br />
刘邦<br />
李世民<br />
康熙<br />
</div>
</td>
</tr>
</table>
</body>
</html>
2.二级联动下拉框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<link rel="stylesheet" href="css/new_file.css" />
<script>
function getContry(){
// alert("is ok");
var sel = document.getElementsByTagName("select")[0];
alert(sel.value);
}
</script>
<script>
var data = {
"山东省":["济南市","青岛市","菏泽市"],
"北京市":["济南市","青岛市","菏泽市"],
"东北市":["济南市","青岛市","菏泽市"]
}
function get(thisobj){
var name = thisobj.value;
var citys = data[name];
var ele = document.getElementsByName("country2")[0];
ele.innerHTML = "<option>--选择城市--</option>";
for(var i=0;i<citys.length;i++){
var opt = document.createElement("option")
opt.innerHTML = citys[i];
ele.appendChild(opt)
}
}
</script>
<body>
<select id="sel" onchange="getContry()" name="country">
<option value="none">--选择国家--</option>
<option value="z">中国</option>
<option value="m">美国</option>
<option value="r">日本</option>
</select>
<br />
<select id="sel1" onchange="get(this)" name="country1">
<option >--选择省份--</option>
<option >山东省</option>
<option >北京市</option>
<option >东北市</option>
</select>
<select id="sel2" name="country2">
<option>--选择城市--</option>
</select>
</body>
</html>