最近在做表單的時候，要用到 省市區(qū)三級聯(lián)動 的插件。 在網(wǎng)上搜了很多插件，但是感覺有的插件做的并不太好，并且有的插件省市區(qū)三個select必須在同一個div包裹下，如果不在同一個包裹下的話，就不能進行關(guān)聯(lián)，個人感覺跟我要用的表單不太搭。
這里推薦個非常好用的 純js插件，使用的時候只需要 引入這個js文件，然后 綁定三個select，作為初始化省市區(qū)的容器，位置可以隨便放哪，都能夠進行聯(lián)動，非常方便。
1. 下面就簡單的介紹下area.js的用法：
- 首先你需要使用
script標簽引入area.js，后續(xù)很多人問我要這個js，可點擊這個鏈接去復(fù)制文件。 - 設(shè)置
三個select標簽設(shè)置id，作為省市區(qū)的容器。 - 然后
初始化，到這里已經(jīng)結(jié)束了。
2. html使用以及初始化
//1.引入area.js文件
<script src="./area.js"></script>
// 2.html結(jié)構(gòu)
<label>省：<select id="province"></select></label><br/>
<label>市：<select id="city"></select></label><br/>
<label>縣：<select id="county"></select></label><br/>
//3.初始化(三個節(jié)點的id)
<script>
_init_("province", "city", "county");
</script>
3. 怎么獲取省市區(qū)的value值？
這里非常的簡單，直接使用jquery中的val()方法。
<script>
//jquery入口函數(shù)
$(function(){
var a = $("#province") .val();//省
var b = $("#city").val(); //市
var c = $("#county").val(); //縣
// 可以添加一個按鈕，觸發(fā)打印省市區(qū)的值
$("#btn").click(function(){
console.log(a,b,c);
});
// 當(dāng)然也可以給select添加change事件
$("#province").bind("change", function(){
console.log($(this).val());
})
});
</script>
4. 怎么設(shè)置指定的值？
比如說我想讓頁面一上來選中了 河南省鄭州市中原區(qū) ，很簡單，直接使用jquery中的val()方法，給它設(shè)置我們指定的值。
$("#province") .val("河南省");//省
$("#city").val(“鄭州市”); //市
$("#county").val(“中原區(qū)”); //縣
刷新頁面你會發(fā)現(xiàn)，只選中了省，市和縣都為空，同時如果此時改變了省的值，但是市和縣也不能進行關(guān)聯(lián)。
5. 為什么呢？ 這就需要我們手動觸發(fā)關(guān)聯(lián)
怎么觸發(fā)關(guān)聯(lián)呢，直接調(diào)用change()方法，給它傳遞索引值。
就是說我們在給它設(shè)置值的時候，每設(shè)置一次值，就要手動觸發(fā)一次關(guān)聯(lián)，比如：
- 省與市的關(guān)聯(lián)，索引為1；
- 市與縣的關(guān)聯(lián)，索引為2；
$("#province") .val("河南省");//省
change(1); // 觸發(fā)省市關(guān)聯(lián)
$("#city").val(“鄭州市”); //市
change(2); // 觸發(fā) 市縣關(guān)聯(lián)
$("#county").val(“中原區(qū)”); //縣
刷新頁面，顯示的就是我們設(shè)置的值，河南省鄭州市中原區(qū)
并且改變省或市都能進行關(guān)聯(lián)下級區(qū)域，you jump I jump
6. 原先未修改的js文件存在的問題？
js文件只能哪里引用哪里才可以使用，比如說你多個頁面都使用了省市區(qū)的插件，就會有問題。
但是修改過的，就不存在這樣的問題，可以放心使用，同時全國省市區(qū)的數(shù)據(jù)city.json一般也不會改變，放在本地加載的速度會更快。
