本文實例為大家分享了js下拉聯動的具體代碼，供大家參考，具體內容如下
<!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>無標題文檔</title>
</head>
<body>
<select id="chengshi" onChange="change()">
<option selected="selected">上海</option>
<option>蘇州</option>
</select>
<select id="quxian">
<option selected="selected">浦東新區</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下拉框的所有內容
if(x.selectedIndex == 0)
{
y.options.add(new Option("浦東新區", "0", false, true));
y.options.add(new Option("徐匯", "1")); // 默認選中省會城市
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)); // 轄張家港市、常熟市、太倉市、昆山市、吳江市，吳中區、相城區、平江區、滄浪區、金阊區，以及蘇州工業園區和蘇州高新區虎丘區。
y.options.add(new Option("常熟市", "1")); // 默認選中省會城市
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"));
}
}
</script>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。