Select Association of layui-csdn blog

Note the following two points to achieve the linkage effect:

First, you can monitor the select change event;

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

HTML structure:

<Form class = "layui-form batchinput-form" Action = "" id = "Box-form">

<Div class = "layui-form-item">
<Div class = "layui-input-inline">
<Label class = "layui-form-label"> Province: </label>
<Div class = "layui-input-block">
<Select name = "Province" id = "Province" Lay-filter = "myselect">
<Option value = ""> select a province </option>
<# List province as provincelist>
<Option value = "$ {provincelist. areaid}" >$ {provincelist. fullname} </option>
</# List>
</SELECT>
</Div>
</Div>
</Div>

<Div class = "layui-form-item">
<Div class = "layui-input-inline">
<Label class = "layui-form-label"> City: </label>
<Div class = "layui-input-block">
<Select name = "city" id = "city" Lay-filter = "myselect2">
</SELECT>
</Div>
</Div>
</Div>
<Div class = "layui-form-item">
<Div class = "layui-input-inline">
<Label class = "layui-form-label"> region: </label>
<Div class = "layui-input-block">
<Select name = "area" id = "area" Lay-filter = "myselect3">
</SELECT>
</Div>
</Div>
</Div>

</Form>

 

JS:

Layui. Use (['lay', 'form'], function (){
VaR layer = layui. Layer
, Form = layui. form;
Form. On ('select (myselect) ', function (data ){
VaR areaid = (data. Value). replaceall (",","");
$. Ajax ({
Type: 'post ',
URL: '/shopinfo/findcity ',
Data: {areaid: areaid },
Datatype: 'json ',
Success: function (data ){
$ ("# City" 2.16.html ("");
$. Each (data, function (Key, Val ){
VaR option1 = $ ("<option>"). Val (Val. areaid). Text (Val. fullname );
$ ("# City"). append (option1 );
Form. Render ('select ');
});
$ ("# City"). Get (0). selectedindex = 0;
}
});
});

});

 

1. Select chage listening event usage

Form. On ('select (myselect) ', function (data) {}) Where myselect is the select lay-filter Attribute Value

2. after the data is asynchronously loaded into the select option, click this select button and you will find that the selection effect of layui does not work. You need to use form. render ('select'); Re-rendering once, it can be used normally.

Select Association of layui-csdn blog