Shulou(Shulou.com)06/02 Report--

How to realize select regional linkage in layui? in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

The first is to be able to listen to the change event of select

The second content loaded asynchronously needs to be re-rendered before it can be used normally.

Html structure:

`

Select region

Please select province

Please select a city

Please select a district / county

Select region

Please choose a town / street

`

Js:

`

Layui.use (['form',' layer', 'laytpl',' jquery'], function () {

Var form = layui.form

, $= layui.jquery

Var parentId ='0'

$(function () {)

$.post (serverPath + "sys/area/backProvince/" + parentId, function (result) {

Var p = result

For (v in p) {

Var pp = p [v] .id

$("# sprinter") .append ("" + p [v] .fullname + "")

}

Form.render ()

})

Form.on ('select (province)', function (data) {

Var p = $("# sroomp") .val ()

If (p! = "1") {

$.post (serverPath + "sys/area/backProvince/" + p, function (result) {

Var c = result

$("# squarc") .html ("")

$("# squarc") .append ("Please select city")

$("# sroomx") .html ("")

$("# county") .append ("Please select a county")

$("# squart") .html ("")

Append ("Please choose a town / street")

$("# sroomb") .html ("")

Append ("Please choose a village / street number")

For (v in c) {

Var cc = c [v] .id

Append ("" + c [v] .fullname + "")

}

Form.render ()

})

}

});

Form.on ('select (city)', function (data) {

Var c = $("# squarc") .val ()

If (c! = "1") {

$.post (serverPath + "sys/area/backProvince/" + c, function (result) {

Var x = result

$("# sroomx") .html ("")

$("# county") .append ("Please select a county")

$("# squart") .html ("")

Append ("Please choose a town / street")

$("# sroomb") .html ("")

Append ("Please choose a village / street number")

For (v in x) {

Var xx = x [v] .id

$("# sroomx") .append ("" + XV] .fullname + "")

}

Form.render ()

});

}

});

Form.on ('select (area)', function (data) {

Var x = $("# soundx") .val ()

If (x! = "1") {

$.post (serverPath + 'sys/area/backProvince/'+ x, function (result) {

Var t = result

$("# squart") .html ("")

Append ("Please choose a town / street")

$("# sroomb") .html ("")

Append ("Please choose a village / street number")

For (v in t) {

Var xx = t [v] .id

Append ("" + t [v] .fullname + "")

}

Form.render ()

});

}

});

});

});

`

Summary:

1.select 's chage snooping event uses the

Form.on ('select (myselect)', function (data) {}), where myselect is the lay-filter attribute value of select

two。 After the data is asynchronously loaded into the option of select, clicking on the select will find that the selection effect of layui does not work, you need to use form.render ('select'); render it again and it can be used normally.

This is the answer to the question about how to realize the regional linkage of select in layui. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.