js省市級聯選單程式碼例項

admin發表於2017-04-15
JS

分享一段程式碼，它實現了省市級聯選單效果。

但是並不推薦使用下面的方式，最好使用json來存放資料，具體可以參閱jQuery解析json格式資料生成級聯選單。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<form name="frm">
  <select name="s1" onChange="redirec(document.frm.s1.options.selectedIndex)">
    <option selected>請選擇</option>
    <option value="四川">四川</option>
    <option value="雲南">雲南</option>
    <option value="陝西">陝西</option>
    <option value="重慶">重慶</option>
  </select>
  <select name="s2" id="fk">
    <option value="請選擇" selected>請選擇</option>
  </select>
</form>
<script>
//獲取一級選單長度
var select1_len = document.frm.s1.options.length;
var select2 = new Array(select1_len);
//把一級選單都設為陣列
for (i = 0; i < select1_len; i++) {
  select2[i] = new Array();
}
//定義基本選項
select2[0][0] = new Option("請選擇", " ");
 
select2[1][0] = new Option("成都", "成都");
select2[1][1] = new Option("自貢", "自貢");
select2[1][2] = new Option("攀枝花", "攀枝花");
select2[1][3] = new Option("瀘州", "瀘州");
select2[1][4] = new Option("德陽", "德陽");
select2[1][5] = new Option("綿陽", "綿陽");
select2[1][6] = new Option("廣元", "廣元");
select2[1][7] = new Option("遂寧", "遂寧");
select2[1][8] = new Option("內江", "內江");
select2[1][9] = new Option("樂山", "樂山");
select2[1][10] = new Option("南充", "南充");
select2[1][11] = new Option("宜賓", "宜賓");
select2[1][12] = new Option("廣安", "廣安");
select2[1][13] = new Option("達州", "達州");
select2[1][14] = new Option("資陽", "資陽");
select2[1][15] = new Option("巴中", "巴中");
select2[1][16] = new Option("雅安", "雅安");
select2[1][17] = new Option("眉山", "眉山");
select2[1][18] = new Option("阿壩藏族羌族", "阿壩藏族羌族");
select2[1][19] = new Option("甘孜藏族", "甘孜藏族");
select2[1][20] = new Option("涼山彝族", "涼山彝族");
select2[1][21] = new Option("華鎣", "華鎣");
select2[1][22] = new Option("簡陽", "簡陽");
 
 
select2[2][0] = new Option("昆明", "昆明");
select2[2][1] = new Option("曲靖", "曲靖");
select2[2][2] = new Option("玉溪", "玉溪");
select2[2][3] = new Option("昭通", "昭通");
select2[2][4] = new Option("臨倉地區", "臨倉地區");
select2[2][5] = new Option("麗江地區", "麗江地區");
select2[2][6] = new Option("思茅地區", "思茅地區");
select2[2][7] = new Option("保山", "保山");
select2[2][8] = new Option("文山壯族苗族", "文山壯族苗族");
select2[2][9] = new Option("紅河哈尼族彝族", "紅河哈尼族彝族");
select2[2][10] = new Option("西雙版納傣族", "西雙版納傣族");
select2[2][11] = new Option("楚雄彝族", "楚雄彝族");
select2[2][12] = new Option("大理白族", "大理白族");
select2[2][13] = new Option("德巨集傣族景頗族", "德巨集傣族景頗族");
select2[2][14] = new Option("怒江傈僳族", "怒江傈僳族");
select2[2][15] = new Option("迪慶藏族", "迪慶藏族");
 
 
select2[3][0] = new Option("西安", "西安");
select2[3][1] = new Option("銅川", "銅川");
select2[3][2] = new Option("寶雞", "寶雞");
select2[3][3] = new Option("咸陽", "咸陽");
select2[3][4] = new Option("渭南", "渭南");
select2[3][5] = new Option("延安", "延安");
select2[3][6] = new Option("漢中", "漢中");
select2[3][7] = new Option("榆林", "榆林");
select2[3][8] = new Option("安康", "安康");
select2[3][9] = new Option("商洛", "商洛");
 
select2[4][0] = new Option("重慶", "重慶");
function redirec(x) {
  document.getElementById("fk").innerHTML = '';
  for (i = 0; i < select2[x].length; i++) {
    document.frm.s2.options[i] = new Option(select2[x][i].text, select2[x][i].value);
  }
  document.frm.s2.options[0].selected = true;
}
</script>
</body>
</html>

相關文章