id="province"
name="province"
onchange="f1()">
---請選擇---option>
select>
id="city"
name="city"
onclick="f2()">
---請選擇---option>
select>
name="country"
id="country">
---請選擇---option>
select>
td>
tr>
//js **
這個得到了第一級的
*/ $(function
() , function
(data)
}, "json")})
/*在下面我會解釋為什麼有 city 和 country (for：回顯)
而且大家可以看到我在追加完之後有個判斷;
那個是修改回顯的時候用到的;單純的出現是**聯動是用不到的
f2()同理
通過第一級得到第二級
$("#province").val()是第一級的id；注意不是pid!!!
*/function
f1(city,country) , function
(data)
f2(country) })}
}}, "json")
}//通過第二級獲取到第**
function
f2(country) , function
(data) })}
}}, "json")
}js 獲取**聯動的值:採用拼接的方式
var adr = "";+ $("#city option:selected").text()+" "
+ $("#country option:selected").text();大家可以看到我在每個取值的後面都加了乙個+」 」
這個呢是為了修改的時候取值方便。直接用split(」 「) 分割就ok了；
以上呢就是新增的
效果如圖
新增成功以後的效果如圖
因為在上面我取值的時候多加了乙個 」 「！所有新增到資料庫的時候就會就乙個間隔
接下來就是修改回顯了
首先我們要從資料庫獲取到值
因為我是用esayui做的 所以我的取值是這樣的
取值就不用說。大家都會!
那麼現在city就是我們取到的位址的值
/*上面已經提到;在取到值得時候;因為新增的時候是" "；隔開新增的；citys[0] 呢就是 省 的值
citys[1] 就是 市 的值
citys[2] 就是 縣 的值
*/var citys=city.split(" ");
$("#province option").each(function
() })大家這個時候返回上面看第二級和第** 聯動那一塊的判斷**
如圖:
寫到這裡大家就應該清楚為什麼要將 city 和 country 給傳過來了
第**也是同理;便可回顯!
好了!修改回顯就完成了!
效果如圖:
後台**就是乙個單錶的查詢
select * from city where pid = #
// #就是你傳過去的值!
create tablecity(
idint(11) not null default 『0』,
pidint(11) default null,
citynamevarchar(255) character set utf8 default null,
typeint(11) default null,
primary key (id)
) engine=innodb default charset=utf8 collate=utf8_unicode_ci;
js省級聯動 資料結構優化
doctype html en utf 8 viewport content width device width,initial scale 1.0 document title divselect style head province name province 請選擇省 option sel...
element 省級級聯
省級聯動可以直接引入指令了 不需要自己在引入json資料了 vue element 直接安裝指令 npm install element china area data s 安裝之後會可以直接匯入六個型別資料 import from element china area data provincea...
Ajax省級三聯動
js部分 varprovincedata 接收後台傳來的所有省市內容 varprovince vararea start選擇省 市 區 functiongetcitydata else 省 functiongetprovince data province.push obj varhtml each...