코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> 제목을 여기에 삽입하십시오 </title>
<script type = "text/javaScript">
// 도시 목록 항목을 저장하기 위해 2D 배열 초기화
var cities = [
[ "anqing", "hefei", "tongcheng"],
[ "Shijiazhuang", "Baoding", "Tangshan"],
[ "Zhengzhou", "Luoyang", "Kaifeng"]
];
// 주를 선택할 때이 방법을 호출하여 도시를 추가하십시오.
함수 provinceChanged (sel) {
// alert ( "select 's length"+sel.options.length);
// SEL은 실제로 선택된 개체입니다
// 옵션 수집을 전송하고 선택한 옵션을 찾으십시오
for (var x = 0; x <sel.options.length; x ++)
{
var opt = sel.options [x];
if (opt.Selected)
{
// 선택한 도시에 옵션을 추가합니다
AddCityToselect (X)
}
}
}
// 선택된 지방의 도시 항목을 도시에 추가
함수 addCityTosElect (x) {
// 2 차원 배열에서 해당 도시를 찾습니다
var city = 도시 [x-1];
var citySelect = document.getElementById ( "select_city");
/*========================= NODE에 이미 존재하는 요소 삭제 ============================================================== ============================================================== ============================================================== ============================================================== ============================================================== ============================================================== ============================================================== ==============================================================
이 메소드가 두 번째 또는 n 번째 시간이라고 할 때, 이전에 추가 된 노드가 City Select Object에 추가되었으므로 지워집니다.
아이디어 1 : 선택 객체의 removeChild ()를 선택하여 루프 트래버스를 통해 단어 노드를 삭제할 수 있습니다.
아이디어 2 : SELECT.OPTIONS.LENGTH = 1 직접 동일한 효과를 얻으려면 SELECT.Options.length = 1을 설정하십시오.
*/
// 도시의 선택 객체에서 옵션 길이를 1로 설정합니다.
CitySelect.Options.length = 1;
// 옵션의 길이를 설정하고 삭제합니다.
//citySelect.Options.length=1;
for (var x = 0; x <city.length; x ++)
{
// 요소 노드 객체를 만듭니다
var OptionName = document.createElement ( "옵션");
// 옵션에 대한 디스플레이 컨텐츠를 설정합니다
OptionName.innerhtml = City [x];
// 선택하려는 생성 된 옵션을 추가합니다
CitySelect.AppendChild (옵션 이름);
/*
이곳에서 특정 지방의 모든 도시를 CitySelect 대상에 추가하십시오.
두 번째 주가 두 번째로 선정되면 제 2 주 아래의 모든 도시가 추가됩니다.
CitySelect 노드 아래. 이 효과는 잘못되었습니다. 그래서 각 추가 전에
CitySelect 노드 아래의 내용을 지우십시오. 다음 모습 :
============================ NODE에 이미 존재하는 요소 삭제 ===============
*/
}
}
</스크립트>
</head>
<body>
<onchange = "provinceChanged (this);">를 선택하십시오
<!-이것의 의미 : ProvinCeChanged (this)를 호출하는 선택 객체를 나타냅니다.
객체 자체를 운영 할 매개 변수로 전달하십시오. ->
<옵션> 주 </옵션>을 선택하십시오
<옵션> anhui </옵션>
<옵션> hebei </옵션>
<옵션> Henan </옵션>
</선택>
<select id = "select_city">
<옵션> City </옵션>을 선택하십시오
</선택>
</body>
</html>