2. 程式人生 > >div展示聯動，js二級聯動城市選擇，非下拉框

div展示聯動，js二級聯動城市選擇，非下拉框

阿新 • • 發佈：2019-02-09
// 省份城市的聯動 var oC=document.getElementsByClassName('oc'); var oCity=document.getElementById('oCity'); var city = [];//申明 　　//定義二級資料 city[0] = ['東城區','西城區','朝陽區','豐臺區','石景山區','海淀區','門頭溝區','房山區','通州區','順義區','昌平區','大興區','懷柔區','平谷區','密雲區','延慶區']; city[1] = ['和平區','河東區','河西區','南開區','河北區','紅橋區','東麗區'
,'西青區','津南區','北辰區','武清區','寶坻區','濱海新區','寧河區','靜海區','薊州區']; city[2] = ['黃浦區','徐彙區','長寧區','靜安區','普陀區','虹口區','楊浦區','閔行區','寶山區','嘉定區','浦東新區','金山區','松江區','青浦區','奉賢區','崇明區']; city[3] = ['萬州區','涪陵區','渝中區','大渡口區','江北區','沙坪壩區','九龍坡區','南岸區','北碚區','綦江區','大足區','渝北區','巴南區','黔江區','長壽區','江津區','合川區','永川區','南川區'
,'璧山區','銅梁區','潼南區','榮昌區','開州區','梁平區','豐都縣','墊江縣','武隆區','忠縣','雲陽縣','奉節縣','巫山縣','巫溪縣','石柱土家族自治縣','秀山土家族苗族自治縣','酉陽土家族苗族自治縣','彭水苗族土家族自治縣'] city[4] = ['石家莊市','唐山市','秦皇島市','邯鄲市','邢臺市','保定市','張家口市','承德市','滄州市','廊坊市','衡水市']; city[5] = ['太原市','大同市','陽泉市','長治市','晉城市','朔州市','晉中市','運城市','忻州市','臨汾市','呂梁市'
]; city[6] = ['呼和浩特市','包頭市','烏海市','赤峰市','通遼市','鄂爾多斯市','呼倫貝爾市','巴彥淖爾市','烏蘭察布市','興安盟','錫林郭勒盟','阿拉善盟']; city[7] = ['瀋陽市','大連市','鞍山市','撫順市','本溪市','丹東市','錦州市','營口市','阜新市','遼陽市','盤錦市','鐵嶺市','朝陽市','葫蘆島市']; city[8] = ['長春市','吉林市','四平市','遼源市','通化市','白山市','松原市','白城市','延邊朝鮮族自治州']; city[9] = ['哈爾濱市','齊齊哈爾市','雞西市','鶴崗市','雙鴨山市','大慶市','伊春市','佳木斯市','七臺河市','牡丹江市','黑河市','綏化市','大興安嶺地區']; city[10] = ['南京市','無錫市','徐州市','常州市','蘇州市','南通市','連雲港市','淮安市','鹽城市','揚州市','鎮江市','泰州市','宿遷市']; city[11] = ['杭州市','寧波市','溫州市','嘉興市','湖州市','紹興市','金華市','衢州市','舟山市','台州市','麗水市']; city[12] = ['合肥市','蕪湖市','蚌埠市','淮南市','馬鞍山市','淮北市','銅陵市','安慶市','黃山市','滁州市','阜陽市','宿州市','六安市','亳州市','池州市','宣城市']; city[13] = ['福州市','廈門市','莆田市','三明市','泉州市','漳州市','南平市','龍巖市','寧德市']; city[14] = ['南昌市','景德鎮市','萍鄉市','九江市','新餘市','鷹潭市','贛州市','吉安市','宜春市','撫州市','上饒市']; city[15] = ['濟南市','青島市','淄博市','棗莊市','東營市','煙臺市','濰坊市','濟寧市','泰安市','威海市','日照市','萊蕪市','臨沂市','德州市','聊城市','濱州市','菏澤市']; city[16] = ['鄭州市','開封市','洛陽市','平頂山市','安陽市','鶴壁市','新鄉市','焦作市','濮陽市','許昌市','漯河市','三門峽市','南陽市','商丘市','信陽市','周口市','駐馬店市','濟源市']; city[17] = ['武漢市','黃石市','十堰市','宜昌市','襄陽市','鄂州市','荊門市','孝感市','荊州市','黃岡市','咸寧市','隨州市','恩施土家族苗族自治州','仙桃市','潛江市','天門市','神農架林區']; city[18] = ['長沙市','株洲市','湘潭市','衡陽市','邵陽市','岳陽市','常德市','張家界市','益陽市','郴州市','永州市','懷化市','婁底市','湘西土家族苗族自治州']; city[19] = ['廣州市','韶關市','深圳市','珠海市','汕頭市','佛山市','江門市','湛江市','茂名市','肇慶市','惠州市','梅州市','汕尾市','河源市','陽江市','清遠市','東莞市','中山市','潮州市','揭陽市','雲浮市']; city[20] = ['南寧市','柳州市','桂林市','梧州市','北海市','防城港市','欽州市','貴港市','玉林市','百色市','賀州市','河池市','來賓市','崇左市']; city[21] = ['海口市','三亞市','三沙市','儋州市','五指山市','瓊海市','文昌市','萬寧市','東方市','定安縣','屯昌縣','澄邁縣','臨高縣','白沙黎族自治縣','昌江黎族自治縣','樂東黎族自治縣','陵水黎族自治縣','保亭黎族苗族自治縣','瓊中黎族苗族自治縣']; city[22] = ['成都市','自貢市','攀枝花市','瀘州市','德陽市','綿陽市','廣元市','遂寧市','內江市','樂山市','南充市','眉山市','宜賓市','廣安市','達州市','雅安市','巴中市','資陽市','阿壩藏族羌族自治州','甘孜藏族自治州','涼山彝族自治州']; city[23] = ['貴陽市','六盤水市','鐘山區','遵義市','安順市','畢節市','銅仁市','黔西南布依族苗族自治州','黔東南苗族侗族自治州','黔南布依族苗族自治州']; city[24] = ['昆明市','曲靖市','玉溪市','保山市','昭通市','麗江市','普洱市','臨滄市','楚雄彝族自治州','紅河哈尼族彝族自治州','文山壯族苗族自治州','西雙版納傣族自治州','大理白族自治州','德巨集傣族景頗族自治州','怒江傈僳族自治州','迪慶藏族自治州']; city[25] = ['拉薩市','日喀則市','昌都市','林芝市','山南市','那曲市','阿里地區']; city[26] = ['西安市','銅川市','寶雞市','咸陽市','渭南市','延安市','漢中市','榆林市','安康市','商洛市']; city[27] = ['嘉峪關市','金昌市','白銀市','天水市','武威市','張掖市','平涼市','酒泉市','慶陽市','定西市','隴南市','臨夏回族自治州甘南藏族自治州']; city[28] = ['西寧市','海東市','海北藏族自治州','黃南藏族自治州','海南藏族自治州','果洛藏族自治州','玉樹藏族自治州','海西蒙古族藏族自治州']; city[29] = ['銀川市','石嘴山市','吳忠市','固原市','中衛市']; city[30] = ['烏魯木齊市','克拉瑪依市','吐魯番市','哈密市','昌吉回族自治州','博爾塔拉蒙古自治州','巴音郭楞蒙古自治州','阿克蘇地區','克孜勒蘇柯爾克孜自治州','喀什地區','和田地區','伊犁哈薩克自治州','塔城地區','阿勒泰地區','石河子市','阿拉爾市','圖木舒克市','五家渠市','北屯市','鐵門關市','雙河市','可克達拉市','昆玉市']; city[31] = []; city[32] = []; city[33] = []; // 呼叫城市選擇的函式 // 樣式的改變 for(var p=0;p<oC.length;p++){ oC[p].indexx=p; oC[p].onclick=function(){ func(this.indexx); this.style.backgroundColor = "#21AECB"; this.style.color = "white"; for(var j=0;j<oC.length;j++){ if(j!=this.indexx){ oC[j].style.backgroundColor = "white"; oC[j].style.color = "#21AECB"; } } } } // 把城市刷出來 function func(m){ oCity.innerHTML=""; for (var i = 0; i < city[m].length; i++) { 　　　　//建立一個option 把資料儲存在option var op = new Option(city[m][i],i); op.className='cityclass'; oCity.append(op); }; getCityName(); } func(0); // 把選擇的城市的資料傳給一個input var citySelect=document.getElementById('citySelect'); function getCityName(){ var cityEach=document.getElementsByClassName('cityclass'); for(var q=0;q<cityEach.length;q++){ // 傳遞資料 cityEach[q].indexx=q; cityEach[q].onclick=function(){ citySelect.value=this.innerHTML; // 改變樣式 this.style.backgroundColor = "#21AECB"; this.style.color = "white"; for(var j=0;j<cityEach.length;j++){ if(j!=this.indexx){ cityEach[j].style.backgroundColor = "white"; cityEach[j].style.color = "#21AECB"; } } } } } getCityName(); // 呼叫城市選擇的蒙版層 $("#ocha").click(function(){ $("#mengCity").css("display","none"); }) $("#quer").click(function(){ $("#mengCity").css("display","none"); }) $("#citySelectBtn").click(function(){ $("#mengCity").css("display","block"); })

相關推薦

div展示聯動，js二級聯動城市選擇，非下拉框

// 省份城市的聯動 var oC=document.getElementsByClassName('oc'); var oCity=document.getElementById('oCity'); var city = [];//申明 　　//定義二級資料 city[0] = ['

js：可輸入可選擇的select下拉框,可及時匹配包含輸入的內容（相容ie）

1、原理： 1.1將input輸入框和select框合併在一起，但是顯示出向下點選的按鈕: 這種比較容易做到 1.2出現輸入值能夠自動匹配的功能 動態的載入一個臨時的div出現在該input下方，當點選頁面中的空白地方，div隱藏。 1.3程式碼： <!docty

js和jQuery以及easyui實現對下拉框的指定賦值

js實現： 1. 通過讓第i個option為selected實現選中第i個，程式碼如下：（id為下拉框id） （1）  document.getElementById("id").options[i].selected=true; （2）document.getElemen

中國城市程式碼json，省市二級聯動json

根據中國城市程式碼表整理的json檔案： level代表行政級別 code代表城市編碼 { "provinces": [ { "name":"北京市", "level":"1", "code":"1100", "cities

跨域請求並展示數據、二級聯動

ket trap index part str payment rto ces [] <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <

js 二級聯動（轉）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath =

js實現下拉框二級聯動

在做專案的時候，一個新增問題題目，選項和答案的問題，題目型別分為選擇題，判斷題，和多選題三種，此處需要新增一個二級聯動的功能，即當題型為選擇題的時候，正確選項的下拉框裡出現的是A,B,C,D.如果題型是判斷題，正確選項的下拉框內容為正確，錯誤，如果題型型別為多選題，則正確答案的輸入框變為可輸

省市區三級聯動select下拉框，下拉框資料回顯 Demo js指令碼實現帶指令碼與案例,整理好了的下載既可用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

初學ajax，實現使用者名稱重複提示、二級/三級聯動下拉框

初學ajax，實現非同步操作！                 以下為三級聯動下拉框部分程式碼 jsp頁面部分程式碼 <table> <tr> <th>下拉框:</th> &l

Ext.js二級聯動

class combo tex 選擇 tps rec test back classic <!DOCTYPE html> <html> <head> <meta charset="utf-8"&

下拉框的二級聯動

fff append 二級 前臺 數據庫表 option return 那種 後臺 需求描述：點擊服務類型下拉框，選擇後，後邊的服務類別會自動的匹配到與服務類型相對應的，臥槽，繞來繞去的，說不明白啦。舉個例子：服務類型A,B,C三個可選，當選擇A的時候，服務類別會自動填充上

ComboGrid二級聯動以及給二級聯動賦默認值

dcl author UNC com xxxxxx height xxxx 設置 dtw //調用二級聯動方法$(function () { combogridTwo("#upAdClass","#upAdPage");//連接地址二級聯動方法封裝 修改

DJANGO實現下拉框的二級聯動

環境：PYTHON2.7+DJANGO1.9 有資料表如下，就是想在每次下拉框選擇dnsname欄位的時候，帶出對應的hostipaddr欄位 實現如下 models.py from __future__ import unicode_literals from django

Ajax 的同步和非同步，下拉框 聯動 回顯第二個不能回顯成功

Ajax 的同步和非同步，下拉框 聯動 回顯第二個不能回顯成功 示例： 使用Ajax 實現下拉框聯動 回顯 出現呢只有第一個能夠回顯成功 其餘的都不能正常回顯。 原因 ：使用了Ajax的非同步 select的賦值再 非同步之前導致的 ( 賦值前個彈出 可以暫停賦值的執行順序 先載入後賦值 )

記一次後端開發者，如何完成前端下拉框三級聯動功能？

前言 下拉框三級聯動這個對於我們大家都很常見，經常在註冊一些資訊的時候，需要選取省市縣等資訊，我需要完成的就是這個功能。 但是無奈這個專案沒有前端開發，而我是一個~專注夾克20年~咦，勁霸男裝？哦~不，是專注後端開發5年~早期學習的jquery，還能記起的常用方法不多了~就知道$("#id")~~~ 但

JavaScript----下拉框二級聯動效果

<!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title>  

基於element ui下拉框的省市二級聯動Vue元件

本人Vue小白，程式碼比較粗陋簡單，歡迎指導。 以下原始碼基於element ui下拉框，對外輸出為選擇省、市的城市編碼，提供重置的方法。 json檔案檢視另一篇文章： https://blog.csdn.net/u013253924/article/details/84334144

jquery省份城市聯動選擇下拉框

<script type="text/javascript" src="__PUBLIC__/Medidata/js/jquery-1.8.3.min.js"></script> <script> var pro = ["北京","天津","上海","重慶",

下拉框選擇聯動，selectpicker重置清空

下拉框選擇聯動 效果如下所示： 左側選擇一個選項時，右側下拉框只出現相應可選擇項 程式碼如下： <select class="form-control" id="acceptdepart" name="acceptdepart"></sel

Jeesite下拉框的二級聯動

話不多說 首先上圖片 JSP 頁面程式碼 截圖 第一個下拉框JSP程式碼 <div class="control-group"> <label class="control-label">