JS는 드롭다운 상자(효과 포함)_javascript 기술의 동적 추가를 구현합니다.

효과 표시:

페이지가 처음 로드될 때: 

차종 선택 후: 

자동차 색상을 선택한 후:  

JS는 드롭다운 상자의 동적 추가를 구현합니다.:

코드 복사 코드는 다음과 같습니다.

;script type="text/javascript" src=" ../JS 파일/jquery.js">

">자동차 유형:
<선택 >
<옵션 값="선택하세요" selected="선택됨">선택하세요
<옵션 값="BMW" >BMW
자동차 색상:



바퀴:

;/form>
< /body> 코드를 복사하세요

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


//given SelectChanged 드롭다운 상자의 시간 인코딩
CarTypeSelect.change(function (){

//현재 드롭다운 상자의 값 가져오기
var CarTypeValue = $(this).val( );
//첫 번째 드롭다운 상자의 내용이 변경되면 세 번째 드롭다운 상자를 숨겨야 합니다.
CarWheelSelect.parent().hide()

if(CarTypeValue !="")
{
CarColorSelect.html("");
$("선택하세요").appendTo(CarColorSelect); 🎜>switch(CarTypeValue ){

case "BMW":
var CarColor=["green","black"]
for(var i = 0;i$("" CarColor[i] "").appendTo(CarColorSelect)
}
break;
케이스 "메르세데스-벤츠":
var CarColor = ["white","red"]
for(var i = 0;i $("" CarColor[i] "").appendTo(CarColorSelect)
}
break;
CarColorSelect.parent( ).show();
}
else
{
CarColorSelect.parent().hide()
}
>
CarColorSelect.change (함수 (){

var CarColorValue = $(this).val();
CarWheelSelect.html("");
if(CarColorValue != " ")
{
CarWheelSelect.html("");
$("선택하세요").appendTo(CarWheelSelect);
스위치 (CarColorValue){

case "green":
var CarWheel = ["green steel","green carbon fibre"]
for(var i = 0;i$ ("<옵션 값='" CarWheel[i] "'>" CarWheel[i] "").appendTo(CarWheelSelect)
}
break;
케이스 " 빨간색":
var CarWheel = ["빨간색 강철","빨간색 탄소 섬유"]
for(var i = 0;i$("<옵션 값 ='" CarWheel[i] "'>" CarWheel[i] "").appendTo(CarWheelSelect)
}
break; case "Black":
var CarWheel = ["Black Steel","Black Carbon Fiber"]
for(var i = 0;i$("< ;option value='" CarWheel[i ] "'>" CarWheel[i] "").appendTo(CarWheelSelect);
}
break;
case "white":
var CarWheel = ["흰색 강철","흰색 탄소 섬유"]
for(var i=0;i$("" CarWheel[i] "").appendTo(CarWheelSelect);
}
break;
}
CarWheelSelect.parent(). show();
else
{
CarWheelSelect.parent().hide()
}
}); >