JS實作下拉框的動態新增(附效果)_javascript技巧

效果展示：

頁面初步載入時：     

選擇車型後：     

選車顏色後：    

JS實作下拉框的動態添加，網頁程式碼如下：

複製程式碼

複製程式碼

程式碼如下

車類型：

請選擇
BMW
賓士



車​​顏色：




車​​輪：

JS代碼如下：

複製代碼 程式碼如下:

// JavaScript Document
$(document).ready(function (){
var CarTypeSelect = $(".CarType").children("select");
var CarColorSelect = $(".CarColor").children("select");
var CarWheelSelect = $(".CarWheel").children("select");


//給第下拉框的SelectChanged時間編碼
CarTypeSelect.change(function (){

//取得目前下拉方塊的值
var CarTypeValue = $(this).val();
//當第一個下拉框內容改變的時候，第三個下拉框要隱藏起來
CarWheelSelect.parent().hide();

if(CarTypeValue !="")
{
CarColorSelect.html("");
$("請選擇").appendTo(CarColorSelect);
switch(CarTypeValue){

case "BMW":
var CarColor=["綠色","黑色"];
for(var i = 0;i$( "" CarColor[i] "").appendTo(CarColorSelect);
}
break;
case "賓士":
var CarColor = ["白色","紅色"];
for(var i = 0;i$("" CarColor[i] "").appendTo(CarColorSelect);
}
break;
}
CarColorSelect.parent().show();
}
else
{
CarColorSelect.parent().hide();
}
});

CarColorSelect.(function (){

var CarColorValue = $(this).val();
CarWheelSelect.html("");
if(CarColorValue != "")
{
CarWheelSelect.html("") ;
$("請選擇").appendTo(CarWheelSelect);
switch(CarColorValue){

case "綠色":
var CarWheel = ["綠鋼","綠碳纖維"];
for(var i = 0;i$("" CarWheel[i] "").appendTo(CarWheelSelect);
}
break;
case "紅色":
var CarWheel = ["紅鋼", "紅碳纖維"];
for(var i = 0;i$("" CarWheel[i] " ").appendTo(CarWheelSelect);
}
break;
case "黑色":
var CarWheel = ["黑鋼","黑碳纖維"];
for(var i = 0;i$("" CarWheel[i] "").appendTo( CarWheelSelect);
}
break;
case "白色":
var CarWheel = ["白鋼","白碳纖維"];
for(var i=0;i$("" CarWheel[i] "").appendTo(CarWheelSelect);
}
break;
}
CarWheelSelect.parent().show();
}
else
{
CarWheelSelect.parent().hide();
}
});
});