js實現省市選擇二級聯動
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<style type="text/css">
select{
width:100px;
}
</style>
</head>
<body>
<script type="text/javascript">
function selectCity(){
var collCities = [['選擇城市']
,['海淀區','朝陽區','東城區','西城區']
,['濟南','青島','煙臺','威海']
,['瀋陽','大連','鞍山','撫順']
,['石家莊','保定','邯鄲','廊坊']];
// var arr = {"beijing":['海淀區','朝陽區','東城區','西城區']};
//獲取兩個下拉選單物件。
var oSelNode = document.getElementById("selid");
var oSubSelNode = document.getElementById("subselid");
//獲取到底選擇的是哪個省。
var index = oSelNode.selectedIndex;
//通過角標到容器去獲取對應的城市陣列。
var arrCities = collCities[index];
//將子選單中的內容清空一下。
// for(var x=0;x<oSubSelNode.options.length; ){
// oSubSelNode.removeChild(oSubSelNode.options[x]);
// }
//清除動作
oSubSelNode.length = 0;
//遍歷這個陣列。並將這個陣列的元素封裝成option物件，新增到子選單中
for(var x=0; x<arrCities.length; x++){
var oOptNode = document.createElement("option");
oOptNode.innerHTML = arrCities[x];
oSubSelNode.appendChild(oOptNode);
}
}
</script>
<select id="selid" onchange="selectCity()">
<option>選擇省市</option>
<option value="beijing">北京</option>
<option>山東</option>
<option>遼寧</option>
<option>河北</option>
</select>
<select id="subselid">
<option>選擇城市</option>
</select>
</body>
</html>
相關推薦
js實現省市選擇二級聯動
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> &
Ajax,js實現省市二級聯動
Ajax，js實現省市二級聯動 這裡不羅嗦，直接放圖，分析。 如圖實現效果。如下： 前端程式碼分析： 後端程式碼，相當簡單，只需要查詢資料庫，省份放一個list集合，城市放一個list集合，回寫響應給前端。 前端通過迴圈，一一獲取。 response.setContentType(“
原生js實現省市二級聯動
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>註冊頁面重新佈局</title> <style type="text/css
很簡單的html+js實現省市二級聯動
var arr = [ ["黃石", "大冶", "黃岡", "武漢", "荊州", "鄂州", "咸寧"], ["長沙", "株洲", "韶關", "湘潭"], ["鄭州", "駐馬店"
用JS實現省市二級聯動
一、需求分析我們希望在註冊頁面中新增一個欄位(籍貫)，當用戶選擇一個具體的省份，在後面的下拉列表中動態載入該省份下所有的城市。顯示的效果如下：二、技術分析使用事件(onchange)使用一個二維陣列來儲存省份和城市獲取使用者選擇的省份(使用方法傳參的方式：this.value
【javaweb】JS實現省市聯動
需求：比如在註冊頁面中，需要選擇籍貫，當我們選擇省的時候，市可以隨著省的選擇不同而變動。 字首知識：https://blog.csdn.net/qq_42370146/article/details/84326604 過程分析： 1. 確定事件: onchange 2. 函式
JS實現省市聯動
不說多了，直接上程式碼，實現省市二級聯動 思路是：點選省份下拉時，觸發getCity()函式，遍歷陣列來獲取市的值 javascript程式碼： var city=[ [], [], ["石家莊","唐山",
jquery $.post() 向php傳值 實現簡單的二級聯動
chang var box jquer lec 簡單 cnblogs encode can 1 其中selectid是一個下拉菜單的id 2 3 $().ready(function () { 4 $("#selectid").change(functi
#JS 中國省市選擇插件
width pro 拷貝 com 案例 height query jquery api 中國省市選擇插件 ChineseCities 1.原生JS，不依賴jquery,zepto 2.前端學習交流群：739574382 下載地址 https://github.com/c
js 實現全國省市區三級聯動
效果： index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>全國城市三級聯動</title> <style typ
ajax相容，同時輸出省份選擇(二級聯動)
執行結果如下圖 單擊上圖的省份，下方列印省份 html程式碼如下圖 <div id="province"></div> <div id="city"></div> css程式碼如下圖 *{ margin: 0; paddi
Angularjs 學習總結 -- 實現省市的三級聯動
一、前言 最近在NG專案做介面中，需要實現一個省市區的三級聯動，這個東西拿到手，想想是很簡單的，網上有大量關於 的三級聯動JS或者JQuery程式碼實現，但其實大部分實現的有點複雜，也不適於移植到NG的前端專案，本文章介紹NG的實現方式，一如既然的簡單暴力。 二
js實現的年月日三級聯動
年預設載入到距離當前100年的年份，同時根據月份是否是閏年自動載入天數。。。<table cellspacing="0" cellpadding="6" border="1"><tr> <td> 出生日期： <
JS 實現的年月日三級聯動
js檔案 SYT="-請選擇年份-"; SMT="-請選擇月份-"; SDT="-請選擇日期-"; BYN=50;//年份範圍往前50年 AYN=5;//年份範圍往後0年 function YMDselect(){ this.SelY=document.getElementsByName(argum
js實現左右選擇框
<script type="text/javascript"> //選擇 function a(){ //var option1=document.getElementsByNam
JSON+JS實現省市縣三級聯動下拉框
function Area(selector){ if (!Area.ALL_AREAS) { throw new Error('areas not init！'); } this.selector = selector; $(this.selecto
js前臺控制select二級聯動，不是用Ajax對資料庫的時時查詢
最近做專案要用到二級連動，索性寫了小例子。大致分為兩種情況，一種是select選單是固定的，如省份與市區的連動。還有一種是select選單不是固定的，要按資料庫生成selec。 先以第一種為例。首先是頁面載入前先載入一個數組供select呼叫。 var selectToo
js實現購物車數量增減聯動價格變化
如題。 使用js實現一個購物車中常見的功能：購物數量增減功能。 我實現的效果如圖： 兩邊是兩個input，中間是一個input輸入框。 HTML： <input id="min" name="" t
js實現下拉框聯動選中日期（select 日期聯動更改）
html程式碼 <head> <script type="text/javascript" src="/js/jquery-1.11.1.min.js" ></script> <script type="text/javascr
分別使用js和JQuery實現省市二級聯動
1.1html js中this指的是當前操作的物件 <tr> <td>籍貫</td> <td><select onchange="changeCity(this.value)" id="province" &g