利用JavaScript實現註冊頁面省市聯動效果(附程式碼)
前段設計註冊頁面技巧:
達到省市聯動效果
<td>
<select onchange="selectProvince()" id="province">
<option value="-1">--請選擇--</option>
<option value="0">甘肅省</option>
<option value="1">陝西省</option>
<option value="2">浙江省</option>
</select>
<select id="city"></select>
</td>
<script type="text/javascript">
var provinces = [
["蘭州市","白銀市","隴南市","酒泉市"],
["西安市","寶雞市","漢中市","延安市"],
["杭州市","寧波市","台州市","溫州市"]
];
function selectProvince(){
var province = document.getElementById("province");
//得到當前選中的是哪個省份
//alert(province.value);
var value = province.value;
//從陣列中取出對應的城市資訊
var cities = provinces[value];
var citySelect = document.getElementById("city");
//清空select中的option
citySelect.options.length = 0;
for (var i=0; i < cities.length; i++) {
// alert(cities[i]);
var cityText = cities[i];
//動態建立城市元素節點
//建立option節點
var option1 = document.createElement("option"); // <option></option>
//建立城市文字節點
var textNode = document.createTextNode(cityText) ;
//將option節點和文字內容關聯起來
option1.appendChild(textNode);
// 新增到城市select中
citySelect.appendChild(option1);
}
}
</script>
相關文章
- js頁面展示省市聯動JS
- 前端利用ajax實現使用者註冊頁面前端
- JavaScript 省市級聯效果JavaScript
- 利用jQuery實現頁面漸顯效果jQuery
- JavaScript省市級聯效果詳解JavaScript
- JS省市區聯動效果JS
- android 全域性頁面滑動返回聯動效果的實現Android
- 登陸註冊頁面html程式碼(仿知乎)HTML
- 如何利用javascript實現頁面間互相傳值JavaScript
- uni-app 實現滑動列表(slider)頁面效果 完整程式碼示例APPIDE
- javascript實現的數字分頁效果程式碼例項JavaScript
- JSP註冊頁面JS
- 滑鼠雙擊頁面實現自動滾動效果
- H5頁面滾動阻尼效果實現H5
- javascript - 使用者註冊頁面(表單驗證)JavaScript
- 直播商城原始碼,實現左右聯動商品分類頁面原始碼
- javascript實現的放大效果程式碼JavaScript
- 直播app開發搭建,註冊頁面樣式,全部程式碼APP
- 10行程式碼實現頁面無限滾動行程
- javaWeb登入註冊頁面JavaWeb
- 用Vue實現省市區三級聯動Vue
- JavaScript 頁面跳轉效果JavaScript
- jquery 實現層級下拉框聯動效果 程式碼jQuery
- 實現網頁標題跳動效果程式碼例項網頁
- CSS實現頁面切換時的滑動效果CSS
- HTML 使用表單標籤實現註冊頁面的例項程式碼HTML
- HTML基礎實現簡單的註冊和登入頁面HTML
- javascript模擬實現滾動條效果程式碼例項JavaScript
- 直播系統app原始碼,Android studio 實現app登入註冊頁面APP原始碼Android
- jQuery + jQuery Mobile 實現省市二級下拉選單頁面jQuery
- JavaScript頁面跳轉程式碼JavaScript
- 小程式頁面動態配置實現
- javascript實現的重新整理當前頁面程式碼例項JavaScript
- 使用者註冊頁面原型原型
- Html完整表單頁面(註冊)HTML
- 利用 OmniGraffle 實現放大鏡標註效果
- WIN下動態註冊碼實現方法 (轉)
- Unix檔案系統頁面監控實現-效果頁面