利用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>
相關文章
- JavaScript 省市級聯效果JavaScript
- 前端利用ajax實現使用者註冊頁面前端
- JavaScript省市級聯效果詳解JavaScript
- uni-app 實現滑動列表(slider)頁面效果 完整程式碼示例APPIDE
- 登陸註冊頁面html程式碼(仿知乎)HTML
- JSP註冊頁面JS
- 直播系統app原始碼,Android studio 實現app登入註冊頁面APP原始碼Android
- HTML 使用表單標籤實現註冊頁面的例項程式碼HTML
- H5頁面滾動阻尼效果實現H5
- 直播app開發搭建,註冊頁面樣式,全部程式碼APP
- uniapp 美化註冊頁面APP
- JavaScript 頁面跳轉效果JavaScript
- 直播商城原始碼,實現左右聯動商品分類頁面原始碼
- CSS實現頁面切換時的滑動效果CSS
- JavaScript頁面跳轉程式碼JavaScript
- 十行程式碼實現網頁標題滾動效果!行程網頁
- javaWeb登入註冊頁面JavaWeb
- 註冊頁面測試點
- bootstrap4註冊頁面boot
- HTML基礎實現簡單的註冊和登入頁面HTML
- 10行程式碼實現頁面無限滾動行程
- 短視訊程式原始碼,PageSlider實現滑動頁面原始碼IDE
- 小程式頁面動態配置實現
- html網頁中如何實現居中效果(程式碼分享)HTML網頁
- 使用者註冊頁面原型原型
- 直播軟體原始碼,實現頁面滾動到可視區顯示動畫效果原始碼動畫
- JavaScript 省市級聯選單原理JavaScript
- Canvas實現放大鏡效果完整案例分析(附程式碼)Canvas
- jsp+servlet登入註冊頁面JSServlet
- bootstrap4登入註冊頁面boot
- 利用Storage Event實現頁面間通訊
- Web 頁面如何實現動畫效果Web動畫
- Java使用正規表示式對註冊頁面進行驗證功能實現Java
- 深入解析微信小程式頁面中實現的儲存圖片(附程式碼)微信小程式
- Spartacus 註冊和登入頁面的實現細節
- js 實現程式碼雨效果JS
- SpringAnimator彈簧聯動效果的實現Spring
- 利用 webhook 實現 Git 自動部署 Laravel 程式碼WebHookGitLaravel