快捷導(dǎo)航

基于js實(shí)現(xiàn)二級(jí)下拉聯(lián)動(dòng)

更新時(shí)間：2016年12月17日 08:46:35 作者：通達(dá)OA阿海

這篇文章主要為大家詳細(xì)介紹了基于js實(shí)現(xiàn)二級(jí)下拉聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js下拉聯(lián)動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>無標(biāo)題文檔</title> 
</head> 
 
<body> 
 
 
<select id="chengshi" onChange="change()"> 
 <option selected="selected">上海</option> 
 <option>蘇州</option> 
</select> 
 
<select id="quxian"> 
 <option selected="selected">浦東新區(qū)</option>  
<option>徐匯</option> 
<option>長寧</option> 
<option>普陀</option> 
<option>閘北</option> 
<option>虹口</option> 
<option>楊浦</option> 
<option>黃浦</option> 
<option>盧灣</option> 
<option>靜安</option> 
<option>寶山</option> 
<option>閔行</option> 
<option>嘉定</option> 
<option>金山</option> 
<option>松江</option> 
<option>青浦</option> 
<option>南匯</option> 
<option>奉賢</option> 
<option>崇明</option> 
 
</select> 
 
 
<script> 
function change() 
{ 
 var x = document.getElementById("chengshi"); 
 var y = document.getElementById("quxian"); 
 y.options.length = 0; // 清除second下拉框的所有內(nèi)容 
 if(x.selectedIndex == 0) 
 { 
  y.options.add(new Option("浦東新區(qū)", "0", false, true)); 
  y.options.add(new Option("徐匯", "1")); // 默認(rèn)選中省會(huì)城市 
  y.options.add(new Option("長寧", "2")); 
  y.options.add(new Option("普陀", "3")); 
  y.options.add(new Option("閘北", "4")); 
  y.options.add(new Option("虹口", "5")); 
  y.options.add(new Option("楊浦", "6")); 
  y.options.add(new Option("黃浦", "7")); 
  y.options.add(new Option("盧灣", "8")); 
  y.options.add(new Option("靜安", "9")); 
  y.options.add(new Option("寶山", "10")); 
  y.options.add(new Option("閔行", "11")); 
  y.options.add(new Option("嘉定", "12")); 
  y.options.add(new Option("金山", "13")); 
  y.options.add(new Option("松江", "14")); 
  y.options.add(new Option("青浦", "15")); 
  y.options.add(new Option("南匯", "16")); 
  y.options.add(new Option("奉賢", "17")); 
  y.options.add(new Option("崇明", "18")); 
  
 } 
 
 if(x.selectedIndex == 1) 
 { 
  y.options.add(new Option("轄張家港市", "0", false, true)); // 轄張家港市、常熟市、太倉市、昆山市、吳江市，吳中區(qū)、相城區(qū)、平江區(qū)、滄浪區(qū)、金閶區(qū)，以及蘇州工業(yè)園區(qū)和蘇州高新區(qū)虎丘區(qū)。 
  y.options.add(new Option("常熟市", "1")); // 默認(rèn)選中省會(huì)城市 
  y.options.add(new Option("太倉市", "2")); 
  y.options.add(new Option("昆山市", "3")); 
  y.options.add(new Option("吳江市", "4")); 
  y.options.add(new Option("吳中區(qū)", "5")); 
  y.options.add(new Option("相城區(qū)", "6")); 
  y.options.add(new Option("平江區(qū)", "7")); 
  y.options.add(new Option("滄浪區(qū)", "8")); 
  y.options.add(new Option("金閶區(qū)", "9")); 
  y.options.add(new Option("蘇州工業(yè)園區(qū)", "10")); 
  y.options.add(new Option("蘇州高新區(qū)", "11")); 
  y.options.add(new Option("虎丘區(qū)", "12")); 
 } 
 
} 
</script> 
  
</body> 
</html>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: