존재 하 는 태그 요소 에 하위 요 소 를 추가 합 니 다.
// “ ” “ ”
var cities=[
[{"name":' ',"value":101},
{"name":' ',"value":102},
{"name":' ',"value":103},
{"name":' ',"value":104}],
[{"name":' ',"value":201},
{"name":' ',"value":202},
{"name":' ',"value":203}],
[{"name":' ',"value":301},
{"name":' ',"value":302},
{"name":' ',"value":303},
{"name":' ',"value":304},
{"name":' ',"value":305}]
];
//
1. 기 존 요소 교체
document. createElement ("태그 이름") 사용 하기;부모 탭 과 같은 유형의 탭 을 만 들 려 면 요소. appendChild (요소 이름) 를 사용 하여 대체 요소 에 하위 요 소 를 추가 합 니 다.
부모 요소. parentNode. replace Childe (바 꾼 요소, 부모 요소) 를 사용 합 니 다.
//
let select_provs=document.querySelector("select[name=provs]");
//
select_provs.onchange=function(event){
//
let select_city=document.querySelector("select[name=cities]");
let select_provs=this;
//
let index=parseInt(select_provs.selectedIndex);
//
if(index>0){
//
let parent=document.createElement("select");
parent.name="cities";
//
parent.appendChild(new Option("— —"));
// ,
// ,
for(let key of cities[index-1]){
//
parent.appendChild(new Option(key.name,key.value));
}
//
select_city.parentNode.replaceChild(parent,select_city);
}else{
// ,
select_city.className="hide";
}
}
2. 문서 세 션 사용
document. createDocumentFragment () 사용 하기;하위 요소 절 차 는 위 에서 직접 부모 요소. append Child (문서 세 션) 와 같 습 니 다.하위 요 소 를 직접 추가 할 수 있 습 니 다.
//
let select_provs=document.querySelector("select[name=provs]");
//
select_provs.onchange=function(event){
//
let select_city=document.querySelector("select[name=cities]");
let select_provs=this;
//
let index=parseInt(select_provs.selectedIndex);
//
if(index>0){
//
parent.appendChild(new Option("— —"));
// ,
// ,
for(let key of cities[index-1]){
//
parent.appendChild(new Option(key.name,key.value));
}
//
select_city.innerHTML="";
//
select_city.appendChild(parent);
//
select_city.className="";
}else{
// ,
select_city.className="hide";
}
}
3. innerHTML 사용
먼저 하위 요 소 를 템 플 릿 문자열 로 연결 한 다음 부모 요소. innerHTML = 템 플 릿 문자열 을 사용 합 니 다.부모 요소 에 하위 요 소 를 추가 할 수 있 습 니 다.
//
let select_provs=document.querySelector("select[name=provs]");
//
select_provs.onchange=function(event){
//
let select_city=document.querySelector("select[name=cities]");
let select_provs=this;
//
let index=parseInt(select_provs.selectedIndex);
//
if(index>0){
// ,
select_city.innerHTML=``;
// ,
// ,
for(let key of cities[index-1]){
select_city.innerHTML+=``;
}
//
select_city.className="";
}else{
// ,
select_city.className="hide";
}
}
1. 장점 은 부모 요소 의 모든 속성 과 innerHTML 을 초기 화 할 때 비교적 편리 하 다.
하위 요 소 를 추가 한 후 부모 요소 속성 과 innerHTML 리 셋 탭 에 사용 합 니 다.
2. 장점 은 부모 요 소 를 여러 번 포착 할 필요 가 없다. 2. 단점 서브 요소 의 모든 속성의 증 가 는 하나의 문구 가 필요 하 다.
하위 요 소 를 추가 한 후 부모 요 소 를 리 셋 할 필요 가 없 는 탭 에 적용 합 니 다.
3. 장점 템 플 릿 문자열 을 직접 연결 하고 하위 요소 속성 을 직접 작성 하면 됩 니 다. 현재 페이지 에서 효 과 를 구현 한 다음 템 플 릿 에 복사 하여 들 어가 ${} 동적 생 성 데 이 터 를 초기 화 할 때 사용 합 니 다 = 필요 없 을 때 사용 합 니 다 + =
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JS 판단 수조 네 가지 실현 방법 상세그러면 본고는 주로 몇 가지 판단 방식과 방식 판단의 원리를 바탕으로 문제가 있는지 토론하고자 한다. 예를 들어 html에 여러 개의 iframe 대상이 있으면 instanceof의 검증 결과가 기대에 부합되지 않을...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.