select下拉選單實現分類級聯效果

admin發表於2017-04-08

本章節分享一段程式碼例項，它實現了使用select下拉選單分類效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
#div{
  width:450px;
  height:134px;
  border:1px solid #fff
}
</style>
 </head>
 <body>
請選擇遊戲類別:<select id="lei" >
 <option>--遊戲分類--</option>
 </select>
請選擇遊戲名稱:<select id="youxi">
 <option>--遊戲名稱--</option>
 </select>
 </body>
 <script type="text/javascript">
 var lei= document.getElementById("lei");
 var youxi= document.getElementById("youxi");
 
 var List=new Array();
   List['紙牌遊戲'] = ['鬥地主','拖拉機','橋牌','拱豬','打百分'];
   List['棋類遊戲'] = ['圍棋','象棋','跳棋','西瓜棋','五子棋'];
   List['其他遊戲'] = ['槍林彈雨','跑跑卡丁車','英雄聯盟','CF','softwhy.com'];
   for(var i in List){
    lei.add(new Option(i,i),null);
   }
    lei.onchange=function(){
    var lei= document.getElementById("lei").value;
    var youxi= document.getElementById("youxi");
    youxi.options.length=0;
    for(var k in List[lei]){
      youxi.add(new Option(List[lei][k],List[lei][k]),null);  
   }
 }
</script>
</html>

具體的實現過程這裡就不介紹了具體可以參閱相關閱讀。

相關閱讀:

（1）.實現原理可以參閱javascript實現的省市級聯效果詳解一章節。

（2）.select下拉選單的操作可以參閱javascript動態操作select下拉選單一章節。

相關文章