JS实现三个列表框实现大类、中类和小类的分类

JavaScript018

JS实现三个列表框实现大类、中类和小类的分类,第1张

数据如果不是定死的就用ajax

如果是定死的就用数据

这是我写的一个例子，数据是定死的，我这里只有两个下拉列表，三个的其实道理一样

<html>

<head>

<meta http-equiv=content-type content="text/htmlcharset=GBK">

<script language="JavaScript" type="text/javascript">

<!--

// 初始时定义相关数组

var provinces = ["吉林", "辽宁", "黑龙江", "江苏", "山东"]

var jiLin = ["长春", "吉林", "白城", "白山"]

var liaoNing = ["沈阳", "大连", "鞍山"]

var heiLongJiang = ["哈尔滨", "佳木斯", "牡丹江", "齐齐哈尔"]

var jiangSu = ["南京", "苏州", "无锡", "常州", "徐州"]

var shanDong = ["济南", "烟台", "青岛", "威海"]

var allProvinces = ["", jiLin, liaoNing, heiLongJiang, jiangSu, shanDong]

// 取得用户选择的省

function selectProvince(obj){

var province = obj.value

if(parseInt(province) >= allProvinces.length)

return

addCity(allProvinces[province])

}

// 向城市复选框中添加数据

function addCity(province){

var citys = document.all.city

citys.options.length = 1

document.all.picture.src = "images\\城市.jpg"

if(province == "") return

for(var i=0i<province.lengthi++){

citys.add(new Option(province[i], i+1, false, false))

}

}

// 选择城市列出介绍

function selectCity(obj){

var city = obj.value

document.all.picture.src = "images\\" + obj.options[parseInt(city)].text + ".jpg"

}

-->

</script>

</head>

<body>

<!--province-->

<select id="sheng" onchange="selectProvince(this)">

<option value="0" selected = true>选择省</option>

</select>

   

<!--city-->

<select id="city" onchange="selectCity(this)">

<option value="0" selected = true>城市</option>

</select>

<br>

<!--picture-->

<table border=15 style=border-style:ridge width=360 height=300>

<tr valign=top>

<td>

<img src="images\\城市.jpg" id="picture" name="picture" width=360 height=300/>

</td>

</tr>

</table>

<script language="JavaScript" type="text/javascript">

<!--

// 初始化省

var obj = document.all.sheng

for(i=0 i<5 i++){

obj.add(new Option( provinces[i], i + 1, false, false))

}

-->

</script>

</body>

</html>

这个简单，我写了段代码，你copy过去看下是不是你要的效果！望采纳！！

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>制作树形菜单</title>

<style type="text/css">

div{/*隐藏层*/

display:none

}

a {/*文字链接的背影样式*/

font-size:13px

color: #ffffff

text-decoration: none

background-color:#669933

width:100px

line-height:25px

text-align:center

display: block

border-right:1px solid #ffffff

border-bottom:1px solid #ffffff

}

a:hover {

/*鼠标在文字链接上时的文字背景样式*/

font-size:13px

color: #ffffff

background-color:#ee9d01

width:100px

text-align:center

display: block

}

</style>

<script type="text/javascript">

function show(d){

document.getElementById(d).style.display='block' //显示层

}

function hide(d){

document.getElementById(d).style.display='none' //隐藏层

}

</script>

</head>

<body>

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td><a href="#" onmousemove="show(1)" onmouseout="hide(1)">手机数码</a></td>

<td><a href="#" onmousemove="show(2)" onmouseout="hide(2)">淘宝集市</a></td>

<td><a href="#" onmousemove="show(3)" onmouseout="hide(3)">品牌商城</a></td>

</tr>

<tr>

<td>

<div id="1" >

<a href="#">手机数码1</a>

<a href="#">手机数码2</a>

<a href="#">手机数码3</a>

</div>

</td>

<td>

<div id="2" >

<a href="#">淘宝集市1</a>

<a href="#">淘宝集市2</a>

<a href="#">淘宝集市3</a>

</div>

</td>

<td>

<div id="3" >

<a href="#">品牌商城1</a>

<a href="#">品牌商城2</a>

<a href="#">品牌商城3</a>

</div>

</td>

</tr>

</table>

</body>

</html>

思路就是：找出父节点的所有子节点的checked的属性设置成与父节点一致即可

我是利用jquery实现，看看是否符合你的要求

<script src="../lib/jquery.js" type="text/javascript"></script>

<script src="../jquery.treeview.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

$("#tree").treeview()

$("input[name='ids']").click(function(){

var checkedValue = this.checked

$(this).parent("li").find("input[name='ids']").attr("checked",checkedValue)

})

})

</script>

<ul id='tree'>

<li>

<input type='checkbox' name='ids' id="test"/>

<span class='folder'>test1</span>

<ul>

<li>

<input type='checkbox' name='ids' />

<span class='folder'>test11</span>

</li>

</ul>

<ul>

<li>

<input type='checkbox' name='ids' />

<span class='folder'>test12</span>

<ul>

<li>

<input type='checkbox' name='ids' />

<span class='folder'>test121</span>

</li>

</ul>

</li>

</ul>

</li>

</ul>