下拉框資料聯動
阿新 • • 發佈：2018-12-29
聯動
無聊玩一下
直接上程式碼
要做的聯動
<body>
國家：
<select id="gj"></select>
省：
<select id="cs"></select>
市：
<select id="s"></select>
</body>
準備資料
//包含有國家名稱的陣列 var guojia = ["--請選擇--", "中國", "尼泊爾", "美國", "韓國", "德國"]; //包含有對應省的陣列 var shengshi = [ ["--請選擇--"], ["--請選擇--", "湖北", "湖南", "河北", "河南", "吉林", "黑龍江", "烏魯木齊"],/*中國*/ ["--請選擇--", "比拉德訥格爾", "賈納克布林", "黑道達", "博卡拉"],/*尼泊爾*/ ["--請選擇--", "紐約", "洛杉磯", "舊金山", "芝加哥", "休斯頓"],/*，美國*/ ["--請選擇--", "首爾", "釜山", "仁川", "春川", "蔚山"],/*韓國*/ ["--請選擇--", "柏林", "漢堡市", "北萊茵-威斯特法倫州", "薩爾州"]/*德國*/ ]; //包含對應市的陣列 var dijishi = [ [["--請選擇--"]], [ ["--請選擇--"], ["--請選擇--","武漢", "黃石", "潛江", "仙桃"],/*湖北*/ ["--請選擇--", "長沙", "株洲", "湘潭"],/*湖南*/ ["--請選擇--", "石家莊", "秦皇島", "唐山"],/*河北*/ ["--請選擇--", "鄭州", "開封", "新鄉"],/*河南*/ ["--請選擇--", "長春", "遼源", "白城"],/*吉林*/ ["--請選擇--", "哈爾濱", "大慶", "伊春"],/*黑龍江*/ ["--請選擇--", "哈密", "博樂", "昌吉"],/*烏魯木齊*/ ],/*中國*/ ]; //因為嫌資料輸入的煩，就沒新增別的國家的市
寫新增資料的方法
新增國家
function f_gj() { //把存有國家資料的陣列迴圈一遍 for (var i = 0; i < guojia.length; i++) { //建立一個option var o = document.createElement('option'); o.text = guojia[i];//設定顯示的值 o.value = guojia[i];//設定value //把建立的option新增到下拉框中去 document.getElementById("gj").add(o); } }
新增省和市
//迴圈新增城市 function f_cs() { //獲取城市選項的長度 var index = document.getElementById("cs").length; //迴圈刪除所有的選項 for (var j = index-1; j > -1; j--) { //移除下拉框物件中索引為j的選項 document.getElementById("cs").remove(j); } //如果不做以上操作下拉框中的選項會隨著函式的觸發只增不減 //獲取國家下拉框選中的值對應的索引 var xiabiao1 = document.getElementById("gj").selectedIndex; //迴圈一遍對應省的資料 for (var i = 0; i < shengshi[xiabiao1].length; i++) { //建立一個option var o = document.createElement('option'); o.text = shengshi[xiabiao1][i];//設定顯示的值 o.value = shengshi[xiabiao1][i];//設定value document.getElementById("cs").add(o);//新增 } } //迴圈新增市 function f_s() { //獲取市選項的長度 var index = document.getElementById("s").length; //迴圈刪除所有的選項 for (var j = index - 1; j > -1; j--) { document.getElementById("s").remove(j);//移除 } //國家下拉框選中值的索引 var xiabiao1 = document.getElementById("gj").selectedIndex; //省下拉框選中值的索引 var xiabiao2 = document.getElementById("cs").selectedIndex; //迴圈一遍對應市的資料 for (var i = 0; i < dijishi[xiabiao1][xiabiao2].length; i++) { //建立一個option var o = document.createElement('option'); o.text = dijishi[xiabiao1][xiabiao2][i];//設定顯示的值 o.value = dijishi[xiabiao1][xiabiao2][i];//設定value document.getElementById("s").add(o);//新增 } }
執行方法
//載入事件
window.onload = function () {
f_gj();//執行新增國家的函式
f_cs();//執行新增省的函式
f_s();//執行新增市的函式
//以上是為了加載出“--請選擇--”
//當國家下拉框的值改變的時候重新載入省下拉框的值
document.getElementById("gj").onchange = f_cs;
//當省的值改變的時候重新載入市的值
document.getElementById("cs").onchange = f_s;
}
完整程式碼
<script type="text/javascript">
//包含有國家名稱的陣列
var guojia = ["--請選擇--", "中國", "尼泊爾", "美國", "韓國", "德國"];
//包含有對應省市的陣列
var shengshi = [
["--請選擇--"],
["--請選擇--", "湖北", "湖南", "河北", "河南", "吉林", "黑龍江", "烏魯木齊"],/*中國*/
["--請選擇--", "比拉德訥格爾", "賈納克布林", "黑道達", "博卡拉"],/*尼泊爾*/
["--請選擇--", "紐約", "洛杉磯", "舊金山", "芝加哥", "休斯頓"],/*，美國*/
["--請選擇--", "首爾", "釜山", "仁川", "春川", "蔚山"],/*韓國*/
["--請選擇--", "柏林", "漢堡市", "北萊茵-威斯特法倫州", "薩爾州"]/*德國*/
];
//包含對應地級市的陣列
var dijishi = [
[["--請選擇--"]],
[
["--請選擇--"],
["--請選擇--","武漢", "黃石", "潛江", "仙桃"],/*湖北*/
["--請選擇--", "長沙", "株洲", "湘潭"],/*湖南*/
["--請選擇--", "石家莊", "秦皇島", "唐山"],/*河北*/
["--請選擇--", "鄭州", "開封", "新鄉"],/*河南*/
["--請選擇--", "長春", "遼源", "白城"],/*吉林*/
["--請選擇--", "哈爾濱", "大慶", "伊春"],/*黑龍江*/
["--請選擇--", "哈密", "博樂", "昌吉"],/*烏魯木齊*/
],/*中國*/
];
//迴圈新增國家
function f_gj() {
for (var i = 0; i < guojia.length; i++) {
//建立一個option
var o = document.createElement('option');
o.text = guojia[i];//設定顯示的值
o.value = guojia[i];//設定value
document.getElementById("gj").add(o);//新增選項到下拉框
}
}
//迴圈新增城市
function f_cs() {
//獲取城市選項的長度
var index = document.getElementById("cs").length;
//迴圈刪除所有的選項
for (var j = index-1; j > -1; j--) {
document.getElementById("cs").remove(j);
}
//國家下拉框選中值的索引
var xiabiao1 = document.getElementById("gj").selectedIndex;
for (var i = 0; i < shengshi[xiabiao1].length; i++) {
//建立一個option
var o = document.createElement('option');
o.text = shengshi[xiabiao1][i];//設定顯示的值
o.value = shengshi[xiabiao1][i];//設定value
document.getElementById("cs").add(o);
}
}
//迴圈新增市
function f_s() {
//獲取市選項的長度
var index = document.getElementById("s").length;
//迴圈刪除所有的選項
for (var j = index - 1; j > -1; j--) {
document.getElementById("s").remove(j);
}
//國家下拉框選中值的索引
var xiabiao1 = document.getElementById("gj").selectedIndex;
//城市下拉框選中值的索引
var xiabiao2 = document.getElementById("cs").selectedIndex;
for (var i = 0; i < dijishi[xiabiao1][xiabiao2].length; i++) {
//建立一個option
var o = document.createElement('option');
o.text = dijishi[xiabiao1][xiabiao2][i];//設定顯示的值
o.value = dijishi[xiabiao1][xiabiao2][i];//設定value
document.getElementById("s").add(o);
}
}
//載入事件
window.onload = function () {
f_gj();//執行新增國家的函式
f_cs();//執行新增省的函式
f_s();//執行新增市的函式
document.getElementById("gj").onchange = f_cs;//當國家下拉框的值改變的時候改變省下拉框的值
document.getElementById("cs").onchange = f_s;//當省的值改變的時候改變市的值
}
</script>
<body>
國家：
<select id="gj"></select>
省：
<select id="cs"></select>
市：
<select id="s"></select>
</body>