2. 程式人生 > >省市區-三級聯動（json資料模擬）

省市區-三級聯動（json資料模擬）

阿新 • • 發佈：2019-01-12
html. <div> <!--<span>請選擇您所在區/縣</span>--> <select id="province" name="province" value="省"> <option value="">請選擇您所在省</option> </select> <!--<span>請選擇您所在區/縣</span>--> <select id="area" name="area"> <option value="">請選擇您所在區/縣</option> </select> <!--<span>請選擇您所在城市</span>--> <select id="city" name="city"> <option value="">請選擇您所在城市</option> </select> </div>js.$(function(){ //json資料 var loadInfo = "city.json"; var _data = ""; $.getJSON(loadInfo, function(data){ _data = data; return _data; }); //省============================================ $.getJSON(loadInfo, function(data){ _data = data; var count = ""; $.each(_data,function(i,val){ $.each(val,function(i,v){ var code = v.code.substr(2,5); //判斷是否屬於省 if(code == "0000"){ var obj = ""; obj += "<option data-id="+v.code+">"+v.name+"</option>"; count += obj; } }) }); $("#province").append(count); }); //省============================================ //市 $("#province").on("change",function(){ var areacount = ""; var code = $(this).find("option:selected").attr("data-id"); $.each(_data,function(i,val){ $.each(val,function(i,v){ if(v.code == code){ $.each(v.city,function(i,v){ var obj = ""; obj += "<option data-id="+v.code+">"+v.name+"</option>"; areacount += obj; }) }else{ $("#city").empty(); } }) }); $("#area").empty(); $("#area").append(areacount); }); //城市 $("#area").on("change",function(){ var citycount = ""; var code = $(this).find("option:selected").attr("data-id"); $.each(_data,function(i,val){ $.each(val,function(i,v){ $.each(v.city,function(i,v){ if(v.code == code){ $.each(v.area,function(i,v){ var obj = ""; obj += "<option data-id="+v.code+">"+v.name+"</option>"; citycount += obj; }) } }) }) }); $("#city").empty(); $("#city").append(citycount); }) })

相關推薦

省市區-三級聯動（json資料模擬）

html. <div> <!--<span>請選擇您所在區/縣</span>--> <select id="province" name="province" value="省">

vue省市區三級聯動（高仿京東）

destroy 傳參 sla solid 列表 git type tom ott 該栗子是我直接從公司的項目單獨拉出來的（懶得重新寫一次了），所以代碼會有些冗余，下面直接看效果： 接著上代碼： html： <template> <div>

JQuery+Ajax實現省市區三級聯動（附效果圖+資料庫）

一、效果圖 1、頁面載入後（初始化：北京市-北京市-東城區） 2、單擊選擇省份後（改變成：河北省-石家莊市-長安區） 二、jsp頁面 <!DOCTYPE html> <html> <head> <meta http-equiv

使用PickerView實現省市區三級聯動（小白篇）

1.概述    之前自己做專案的時候需要用到省市區三級聯動的效果，本來想自己做一個，可是後來看到了github上的開源專案pickerView,個人感覺非常好用，然後去百度的時候發現好多人的部落格寫的太過於簡單，好多人是直接複製開發者的使用介紹，導致很多新手朋友沒辦法使用，

Vue2中的省市區三級聯動（仿淘寶）

三級聯動，隨著越來越多的審美，出現了很多種，好多公司都仿著淘寶的三級聯動 ，好看時尚，so我們公司也一樣……為了貼程式碼方便，我把寫在data裡面省市區的json獨立了出來，下載貼進去即可用，連結如下：http://download.csdn.net/detail/zhao

javaweb--json--ajax--mysql實現省市區三級聯動（附三級聯動數據庫）

知識點 request test div 對數 能說 面向對象 inf HA 在web中，實現三級聯動很常見，尤其是利用jquery+json。但是從根本上來說jquery並不是最能讓人容易理解的，接下來從最基本的javascript開始，實現由javascript+jso

iview省市區三級聯動（無後臺數據情況下）

 1、先引入 import city from"../../../../static/city.json"  2、然後在data裡新增  city:city  3、省（1）寫法，打包沒問題 mounted(){

純JS省市區三級聯動（行政區劃程式碼更新至2015-9-30）

本文程式碼實現的功能是省市區三級聯動下拉列表，純Javascript，網上已有很多這方面的程式碼。但是作為一個新手，這是我的第一篇CSDN部落格，發此文的目的主要是學習交流，希望看到的朋友發現有什麼不對的地方批評指正一下。 整體的實現思路是：1、建立一個"place類"

省市區三級聯動（模板）

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

三級聯動（前端代碼）

nbsp cnblogs http 三級聯動 img bsp 三級 技術分享 級聯 前端代碼： 三級聯動（前端代碼）

js 相關語法（json資料處理）

1 . 將數組裡面的物件的每一項的值 轉換成 字串 型別 PS: 比較String() 和 toString() 兩種方法； 都是將其它型別的變數轉換為字串的方法,BUT,toString():無法

返回三級聯動的JSON資料

如下，我們要返回下面的資料格式 { "value": "3", "label": "安徽省", "children": [ { "value": "安慶市", "label":

js實現選擇地址的三級聯動（精確到區）

頁面上使用的是 <select class="form-control" id="cmbProvince" name="cmbProvince" ></select><select class="form-control" id="cmbCit

使用JDBC獲取資料庫資料，並生成json格式檔案（省市區三級聯動）

前言： 轉眼已經2018年了， 17年有點忙，出差將近三個月，部落格也停更了好久。 一直都是不停的修復bug，和做一些業務需要的提示和互動。主要是因為和硬體有關係所以比較麻煩，開發週期也很長，而且還不穩定，硬體先行，然後在是除錯，互動。不過也有好處，學到的東西自然不是簡簡單單的 程式碼了。

基於JQuery+Json資料格式的省市區三級聯動

本文章適用於新手，老手自便 先看原始碼: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script ty

Java，基於SSM,省市區三級聯動後臺查詢（單表），附（建表語句+查詢Sql）

1、建表語句 CREATE TABLE "hxdb"."sys_area" ( "id" varchar(64) COLLATE "default" NOT NULL, "code" varchar(

三級聯動---（省市區）

首先建立三個下拉列表框 <select id="sheng"></select> <select id="shi"></select> <select id="qu"></select> 分別

省市定位（省市區三級聯動外掛Distpicker）

效果圖 點選切換城市出現兩級聯動，因為這裡選擇的是城市，所以沒有選擇地區 點選確認即會獲取使用者選擇的城市，然後通過text（）將顯示城市的地方進行替換； （注：剛開始使用replaceWith，但只能執行一次，選取城市後再次選取城市不再改變）  程式碼如下：

js實現移動端省市區三級聯動選擇器（附原始碼）

效果圖:  核心程式碼： <script> var nameEl = document.getElementById('sel_city'); var first = []; /* 省，直轄市 */ var second = []

Ajax 省市區三級聯動資料庫（資料庫程式碼）

//index.html<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script