當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS实现省市联动效果
生活随笔
收集整理的這篇文章主要介紹了
JS实现省市联动效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
實現(xiàn)的效果為：當(dāng)選擇一個省的時候，會自動出現(xiàn)該省下的市級
效果圖如下：
<body><div><!--界面展示--><span>省份：</span><select id="province" onchange="city()"><option value="" selected="selected">--請選擇--</option><option value="beijing" >北京</option><option value="jiangxi" >江西</option><option value="hunan" >湖南</option></select><span>城市：</span><select id="city"><option value="" selected="selected">--請選擇--</option></select></div> </body> <script>function city() {//通過Id獲取選擇的省份var provinceObj = document.getElementById('province');//根據(jù)id獲取市級標簽var cityObj = document.getElementById('city');var selectProvince = provinceObj.value;//根據(jù)選擇的省份設(shè)置市級標簽中的內(nèi)容if(selectProvince == "") {cityObj.innerHTML = '<option value="" selected="selected">--請選擇--</option>';} else if(selectProvince == "beijing") {cityObj.innerHTML = '<option value="chaoyangqu" selected="selected">朝陽區(qū)</option>' +'<option value="tiananmen" >天安門</option>' +'<option value="yiheyuan" >頤和園</option>' +'<option value="zijincheng" >紫禁城</option>';} else if(selectProvince == "jiangxi") {cityObj.innerHTML = '<option value="nanchang" selected="selected">南昌</option>' +'<option value="ganzhou" >贛州</option>' +'<option value="jiujiang" >九江</option>' +'<option value="shangrao" >上饒</option>';} else if(selectProvince == "hunan") {cityObj.innerHTML ='<option value="changsha" selected="selected">長沙</option>' +'<option value="hy" >衡陽</option>' +'<option value="zz" >株洲</option>' +'<option value="sy" >邵陽</option>';} } </script>?
轉(zhuǎn)載于:https://www.cnblogs.com/web12/p/10171498.html
總結(jié)
以上是生活随笔為你收集整理的JS实现省市联动效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CentOS7加入windows 200
- 下一篇： MobX - 基于响应式的状态管理