可分级分组分类的Select下拉列表代码

最新推荐文章于 2021-12-23 22:38:19 发布

sumjob

最新推荐文章于 2021-12-23 22:38:19 发布

阅读量1.4k

点赞数

分类专栏： HTML资源常见问题 JS资源

本文链接：https://blog.csdn.net/sumjob/article/details/103465125

版权

常见问题同时被 3 个专栏收录

63 篇文章 1 订阅

订阅专栏

HTML资源

26 篇文章 0 订阅

订阅专栏

JS资源

11 篇文章 0 订阅

订阅专栏

第一种：分级的下拉列表，可对下拉列表中的各个列表值分类，不明白意思的，复制代码运行一下代码你就明白了。运行后可看到，下拉列表中的值是有分类名称的，当下拉值较多的时候，可避免灵乱。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>分级下拉列表</title>
</head>
<body style="font-size:12px">
<form id="form1" name="form1" method="post" action="">
  <table width="206" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td height="25">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;图书分类</td>
    </tr>
    <tr>
      <td height="28" align="center"><select name="book_class" id="book_class">
	      <optgroup label="Web设计">
          <option>网站建设</option>
          <option>网页设计</option>	
          <option>JavaScript程序设计</option>
		  </optgroup>	
		  <optgroup label="软件世界">
          <option>软件工程</option>
          <option>软件应用</option>
		  </optgroup>
        </select></td>
    </tr>
  </table>
</form>
</body>
</html>


第二种：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>在下拉列表中显示的多级树形菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script type="text/javascript"> 
var data =new Array(); 
data[0]= {id:'0',pid:'1',text:'河北'}; 
data[1]= {id:'1',pid:'-1',text:'中国'}; 
data[2]= {id:'2',pid:'6',text:'莫斯科'}; 
data[3]= {id:'3',pid:'0',text:'河南'}; 
data[4]= {id:'4',pid:'0',text:'北京'}; 
data[5]= {id:'5',pid:'3',text:'湖南'}; 
data[6]= {id:'6',pid:'-1',text:'俄罗斯'}; 
function TreeSelector(item,data,rootId){ 
this._data = data; 
this._item = item; 
this._rootId = rootId; 
} 
TreeSelector.prototype.createTree = function(){ 
var len =this._data.length; 
for( var i= 0;i<len;i++){ 
if ( this._data[i].pid == this._rootId){ 
this._item.options.add(new Option(".."+this._data[i].text,this._data[i].id)); 
for(var j=0;j<len;j++){ 
this.createSubOption(len,this._data[i],this._data[j]); 
} 
} 
} 
} 
TreeSelector.prototype.createSubOption = function(len,current,next){ 
var blank = ".."; 
if ( next.pid == current.id){ 
intLevel =0; 
var intlvl =this.getLevel(this._data,this._rootId,current); 
for(a=0;a<intlvl;a++) 
blank += ".."; 
blank += "├-"; 
this._item.options.add(new Option(blank + next.text,next.id)); 
for(var j=0;j<len;j++){ 
this.createSubOption(len,next,this._data[j]); 
} 
} 
} 
TreeSelector.prototype.getLevel = function(datasources,topId,currentitem){ 
var pid =currentitem.pid; 
if( pid !=topId) 
{ 
for(var i =0 ;i<datasources.length;i++) 
{ 
if( datasources[i].id == pid) 
{ 
intLevel ++; 
this.getLevel(datasources,topId,datasources[i]); 
} 
} 
} 
return intLevel; 
} 
</script> 
</head>
<body>
<select id="myselect"></select> 
<script language=javascript type="text/javascript"> 
var ts = new TreeSelector(document.getElementById("myselect"),data,-1); 
ts.createTree(); 
</script> 
</body>
</html>