<select name="addressCity" class="txtBlack12" id="addressCity" onchange="cityChange('addressCity', 'addressCounty');">
<option value="">請選擇</option>
<option value="台北市">台北市</option>
<option value="基隆市">基隆市</option>
<option value="台北縣">台北縣</option>
<option value="宜蘭縣">宜蘭縣</option>
<option value="桃園縣">桃園縣</option>
<option value="新竹市">新竹市</option>
<option value="新竹縣">新竹縣</option>
<option value="苗栗縣">苗栗縣</option>
<option value="台中市">台中市</option>
<option value="台中縣">台中縣</option>
<option value="彰化縣">彰化縣</option>
<option value="南投縣">南投縣</option>
<option value="嘉義市">嘉義市</option>
<option value="嘉義縣">嘉義縣</option>
<option value="雲林縣">雲林縣</option>
<option value="台南市">台南市</option>
<option value="台南縣">台南縣</option>
<option value="高雄市">高雄市</option>
<option value="高雄縣">高雄縣</option>
<option value="屏東縣">屏東縣</option>
<option value="花蓮縣">花蓮縣</option>
<option value="台東縣">台東縣</option>
<option value="澎湖縣">澎湖縣</option>
<option value="金門縣">金門縣</option>
<option value="連江縣">連江縣</option>
</select>
</label>
<label>
<select name="addressCounty" class="txtBlack12" id="addressCounty">
<option value="">請選擇</option>
</select>
</label>
//根據縣市選擇
var city_x = new Array();
city_x[''] = ["請選擇"];
city_x['基隆市'] = ["仁愛區","信義區","中正區","中山區","安樂區","暖暖區","七堵區"];
city_x['台北市'] = ["中正區","大同區","中山區","松山區","大安區","萬華區","信義區","士林區","北投區","內湖區","南港區","文山區"];
city_x['台北縣'] = ["萬里鄉","金山鄉","板橋市","汐止市","深坑鄉","石碇鄉","瑞芳鎮","平溪鄉","雙溪鄉","貢寮鄉","新店市","坪林鄉","烏來鄉","永和市","中和市","土城市","三峽鎮","樹林市","鶯歌鎮","三重市","新莊市","泰山鄉","林口鄉","蘆洲市","五股鄉","八里鄉","淡水鎮","三芝鄉","石門鄉"];
city_x['桃園縣'] = ["中壢市","平鎮市","龍潭鄉","楊梅鎮","新屋鄉","觀音鄉","桃園市","龜山鄉","八德市","大溪鎮","復興鄉","大園鄉","蘆竹鄉"];
city_x['新竹市'] = ["新竹市"];
city_x['新竹縣'] = ["竹北市","湖口鄉","新豐鄉","新埔鄉","關西鄉","芎林鄉","寶山鄉","竹東鄉","五峰鄉","橫山鄉","尖石鄉","北埔鄉","峨眉鄉"];
city_x['苗栗縣'] = ["竹南鎮","頭份鎮","三灣鄉","南庄鄉","獅潭鄉","後龍鎮","通霄鎮","苑裡鎮","栗市","造橋鄉","頭屋鄉","公館鄉","大湖鄉","泰安鄉","銅鑼鄉","三義鄉","西湖鄉","卓蘭鎮"];
city_x['台中市'] = ["中區","東區","南區","西區","北區","北屯區","西屯區","南屯區"];
city_x['台中縣'] = ["太平市","大里市","霧峰鄉","烏日鄉","豐原市","后里鄉","石岡鄉","東勢鎮","和平鄉","新社鄉","潭子鄉","大雅鄉","神岡鄉","大肚鄉","沙鹿鎮","龍井鄉","梧棲鎮","清水鎮","大甲鎮","外埔鄉","大安鄉"];
city_x['彰化縣'] = ["彰化市","芬園鄉","花壇鄉","秀水鄉","鹿港鎮","福興鄉","線西鄉","和美鎮","伸港鄉","員林鎮","社頭鄉","永靖鄉","埔心鄉","溪湖鎮","大村鄉","埔鹽鄉","田中鎮","北斗鎮","田尾鄉","埤頭鄉","溪州鄉","竹塘鄉","二林鎮","大城鄉","芳苑鄉","二水鄉"];
city_x['南投縣'] = ["南投市","中寮鄉","草屯鎮","國姓鄉","埔里鎮","仁愛鄉","名間鄉","集集鎮","水里鄉","魚池鄉","信義鄉","竹山鎮","鹿谷鄉"];
city_x['雲林縣'] = ["斗南鎮","大埤鄉","虎尾鎮","土庫鎮","褒忠鄉","東勢鄉","臺西鄉","崙背鄉","麥寮鄉","斗六市","林內鄉","古坑鄉","莿桐鄉","西螺鎮","二崙鄉","北港鎮","水林鄉","口湖鄉","四湖鄉","元長鄉"];
city_x['嘉義市'] = ["嘉義市"];
city_x['嘉義縣'] = ["番路鄉","梅山鄉","竹崎鄉","阿里山鄉","中埔鄉","大埔鄉","水上鄉","鹿草鄉","太保市","朴子市","東石鄉","六腳鄉","新港鄉","民雄鄉","大林鎮","溪口鄉","義竹鄉","布袋鎮"];
city_x['台南市'] = ["中區","東區","南區","西區","北區","安平區","安南區"];
city_x['台南縣'] = ["永康市","歸仁鄉","新化鎮","左鎮鄉","玉井鄉","楠西鄉","南化鄉","仁德鄉","關廟鄉","龍崎鄉","官田鄉","麻豆鎮","佳里鎮","西港鄉","七股鄉","將軍鄉","學甲鎮","北門鄉","新營市","後壁鄉","白河鎮","東山鄉","六甲鄉","下營鄉","柳營鄉","鹽水鎮","善化鎮","大內鄉","山上鄉","新市鄉","安定鄉"];
city_x['高雄市'] = ["新興區","前金區","苓雅區","鹽埕區","鼓山區","旗津區","前鎮區","三民區","楠梓區","小港區","左營區"];
city_x['高雄縣'] = ["仁武鄉","大社鄉","岡山鎮","路竹鄉","阿蓮鄉","田寮鄉","燕巢鄉","橋頭鄉","梓官鄉","彌陀鄉","永安鄉","湖內鄉","鳳山市","大寮鄉","林園鄉","鳥松鄉","大樹鄉","旗山鎮","美濃鎮","六龜鄉","內門鄉","杉林鄉","甲仙鄉","桃源鄉","三民鄉","茂林鄉","茄萣鄉"];
city_x['屏東縣'] = ["屏東市","三地門鄉","霧臺鄉","瑪家鄉","九如鄉","里港鄉","高樹鄉","鹽埔鄉","長治鄉","麟洛鄉","竹田鄉","內埔鄉","萬丹鄉","潮州鎮","泰武鄉","來義鄉","萬巒鄉","崁頂鄉","新埤鄉","南州鄉","林邊鄉","東港鎮","琉球鄉","佳冬鄉","新園鄉","枋寮鄉","枋山鄉","春日鄉","獅子鄉","車城鄉","牡丹鄉","恆春鎮","滿州鄉"];
city_x['宜蘭縣'] = ["宜蘭市","頭城鎮","礁溪鄉","壯圍鄉","員山鄉","羅東鎮","三星鄉","大同鄉","五結鄉","冬山鄉","蘇澳鎮","南澳鄉"];
city_x['花蓮縣'] = ["花蓮市","新城鄉","秀林鄉","吉安鄉","壽豐鄉","鳳林鎮","光復鄉","豐濱鄉","瑞穗鄉","萬榮鄉","玉里鎮","卓溪鄉","富里鄉"];
city_x['臺東縣'] = ["臺東市","綠島鄉","蘭嶼鄉","延平鄉","卑南鄉","鹿野鄉","關山鎮","海端鄉","池上鄉","東河鄉","成功鎮","長濱鄉","太麻里","金峰鄉","大武鄉","達仁鄉"];
city_x['澎湖縣'] = ["馬公市","西嶼鄉","望安鄉","七美鄉","白沙鄉","湖西鄉"];
city_x['金門縣'] = ["金沙鎮","金湖鎮","金寧鄉","金城鎮","烈嶼鄉","烏坵鄉"];
city_x['連江縣'] = ["南竿鄉","北竿鄉","莒光鄉","東引鄉"];
function cityChange( city_id , county_id ){
var city = document.getElementById(city_id);
var county = document.getElementById(county_id) ;
county.length = 1 ;
if(typeof(city_x[city.value])=='undefined') return;
for( var i = 0 ; i < city_x[city.value].length ; i++ ){
county.options[i] = new Option(city_x[city.value][i], city_x[city.value][i]);
}
}
分享到:
相关推荐
在网页开发中,AJAX(Asynchronous JavaScript and XML)二级下拉框联动是一种常见的交互设计,用于提升用户体验,尤其在处理复杂表单或选择结构化数据时。这种技术允许用户在一个下拉框中做出选择后,根据所选值...
在实际应用中,可能还需要考虑初始加载时就设置默认的二级选项,以及在用户未选择任何一级选项时隐藏或禁用二级下拉框等问题。此外,为了提升用户体验,还可以添加加载动画,提示用户数据正在加载。 总结来说,...
4. **动态更新DOM**:根据用户选择的省份,筛选出对应市的数据,然后使用`innerHTML`属性或者`append()`方法来更新二级下拉框的内容。 5. **异步加载**:为了提高页面加载速度,数据可能不是一开始就全部加载的,...
当用户在第一级下拉框选择国家时,`change`事件触发,执行相应的JavaScript函数,更新第二级下拉框的选项。 4. **数据结构**:通常,这些数据(国家、省份和城市)会被存储在一个合适的结构中,如对象数组或JSON...
"jQuery下拉框二级三级城市联动插件"就是这样一个工具,它允许用户通过级联的下拉菜单,便捷地选择多级地理信息。这个插件基于JavaScript库jQuery构建,具有高度的灵活性和易用性。 首先,jQuery是JavaScript的一个...
下拉框二级联动技术是一种在网页上常用的交互方式,它可以根据用户在一级下拉框中的选择动态改变二级下拉框中的选项内容。本文详细介绍了如何使用JavaScript实现下拉框二级联动功能,提供了具体的代码实现以及相关...
supplyInfo_update.jsp稍微难了点,不仅仅是一级触发实现二级联动,还有它是将数据库中相应的省份城市提取出来,将原有增加的省份城市提取给用户,供用户修改;对于JSP里的html:select及其html:option几乎只用直接拷贝,没...
SharePoint中的二级联动下拉框控件是一种交互式的用户界面元素,它允许用户在两个相关的下拉菜单中选择选项,这两个菜单通常是关联的,即在一个菜单中选择一个选项后,另一个菜单会根据所选选项动态更新其显示内容。...
首先,理解“三级联动”:在地区选择中,通常会分为国家、省份、城市三个级别,当用户在一级下拉框中选择一个选项时,二级下拉框会根据所选内容动态更新其选项,同理,选择二级后三级也会相应更新。这种在一个选择器...
2. 使用JavaScript或jQuery在客户端处理下拉框的事件,当用户在任一下拉框中选择一个值时,触发AJAX请求到服务器。 3. ASP脚本接收请求,根据请求参数查询XML数据,然后返回下一级菜单的选项。 4. 客户端接收到...
本篇文章将详细介绍如何使用 JavaScript 实现二级菜单的联动效果。 首先,我们需要在 HTML 中设置基础的结构。二级菜单通常由一个主菜单(一级菜单)和一组子菜单(二级菜单)组成。以下是一个简单的 HTML 结构示例...
5. 最后,JavaScript将处理后的字符串插入到二级下拉框中,完成联动效果。 这个方法在实际应用中非常实用,只需针对不同的数据库和业务逻辑进行适当的修改,即可轻松实现类似功能。在开发过程中,确保数据安全性和...
全国地址下拉框三级联动是一种常见的前端交互设计,主要用于用户在输入框中选择或搜索地址时,提供省、市、区三级的下拉菜单选项,提高用户体验并减少输入错误。这种功能常见于各种在线表单、注册页面或者物流配送...
在JavaScript(JS)编程中,实现年月日三级联动下拉框日期选择是一种常见的需求,尤其是在网页表单或交互式用户界面中。这种设计允许用户通过三个下拉菜单分别选择年、月和日,形成一个完整的日期。在这个"JS年月日...
2. **事件监听**:当用户在一级下拉框中做出选择时,需要监听该事件并触发二级下拉框的更新。layui提供了丰富的事件处理机制,可以方便地进行事件绑定和解绑。 3. **DOM操作**:在用户选择发生变化时,需要动态地...
当用户在一级或二级下拉框中做出选择时,触发事件,发送Ajax请求到服务器。 4. **Ajax请求**:当事件触发后,JavaScript会构造一个XMLHttpRequest对象,发送GET或POST请求到服务器端的处理程序,如Servlet或PHP。...
这个项目是一个基础的SSM整合实例,旨在帮助初学者理解这些框架如何协同工作并实现基本的CRUD(创建、读取、更新、删除)操作,以及利用Ajax和jQuery实现动态下拉框和二级省市联动效果。 1. **Spring框架**:Spring...
它实现了下拉框之间的联动逻辑,当用户在一级下拉框中选择一个选项时,二级、三级下拉框会自动更新对应的数据。 3. `css` 文件夹:包含CSS样式文件,如`style.css`,用于定制插件的视觉样式,确保下拉框与页面其他...
《jQuery.multiselect.js:打造高效多选下拉框选择体验》 在Web开发中,下拉框(Dropdown)是常用的一种交互元素,尤其在需要用户从多个选项中进行选择时。然而,传统的HTML `<select>` 标签在处理大量选项或需要...
在JavaScript编程中,"二级联动"通常指的是两个下拉选择框之间存在依赖关系,当用户在第一个下拉框(通常是省份)中选择一项时,第二个下拉框(城市)的内容会根据所选的省份动态更新。这个过程是通过JavaScript实现...