layui實現省市區二級聯動及編輯時獲取選中的值

2021-09-25 08:19:00 字數 1650 閱讀 3114

最近在做乙個專案,因為用到省市區聯動,框架用的是layui框架,就自己寫了個方法來實現!

因為很多地方需要使用這個,所以本人就封裝了乙個函式linkage.js

另外,此處用到乙個省市區的js ,area.js 如有需要可以聯絡qq598194221

//初始載入

function initial(province,city,area,provinceid)

else

}$("#"+province).html(html);

= html;

//獲取市

'select('+province+')', function(data)

else

} = html;

$("#"+city).html(html);

//});

//獲取區

// form.on('select('+city+')', function(data)

else

} = html;

$("#"+area).html(html);

form.render('select');

})}//省市區**聯動

function linkage(province,city,area)

document.getelementbyid(province).innerhtml = html;

//獲取市

form.on('select('+province+')', function(data)

document.getelementbyid(city).innerhtml = html;

form.render('select');

});//獲取區

form.on('select('+city+')', function(data)else

if(dd.length>2) else

var object = chinesedistricts[valoption];

var html = '';

html += "區";

for (var i in object)

document.getelementbyid(area).innerhtml = html;

form.render('select');

});//獲取區

form.on('select('+area+')', function(data)else

if(dd.length>=3)

else

$('.'+province+'_cn').val(pp.join("/"));

$('.'+province).val(dd.join());

});})

}

引入js開始實現

經常居住地

請選擇省

請選擇市

請選擇縣/區

layui.use(['laydate','layer','form','treeselect'], function())

這樣就實現了,聯動效果和再編輯的時候自動選中該值得效果!如下圖

js 多級聯動(省 市 區)

方式一 資料從資料庫獲取,ajax實現區域性重新整理 方式二 資料從json檔案獲取,ajax實現區域性重新整理 以方式二為例,進行演示 省市區 聯動 前提 需要有省 市 區三個的資料封裝檔案 實現 1.自封裝函式 多級聯動 function multiplecascades 建立select標籤 ...

js 多級聯動(省 市 區)

方式一 資料從資料庫獲取,ajax實現區域性重新整理 方式二 資料從json檔案獲取,ajax實現區域性重新整理 以方式二為例,進行演示 省市區 聯動 前提 需要有省 市 區三個的資料封裝檔案 實現 1.自封裝函式 多級聯動 function multiplecascades 建立select標籤 ...

js 多級聯動(省 市 區)

方式一 資料從資料庫獲取,ajax實現區域性重新整理 方式二 資料從json檔案獲取,ajax實現區域性重新整理 以方式二為例,進行演示 省市區 聯動 前提 需要有省 市 區三個的資料封裝檔案 實現 1.自封裝函式 多級聯動 function multiplecascades 建立select標籤 ...