layui select二级联动
原理：JS获取option value, ajax到php，从MYSQL中取出数据，返回JSON，JQ控制二级栏目变化
HTML：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<
label
class
=
"layui-form-label"
>所属分类
<
div
class
=
"layui-input-inline"
>
<
select
name
=
"cid"
lay-filter
=
"test"
>
<
option
value="">
<
label
class
=
"layui-form-label"
>栏目
<
div
class
=
"layui-input-inline"
>
<
select
name
=
"cid"
id
=
"area"
>
<
option
value
=
"0"
>请选择栏目
|
AJAX：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
form.on(
'select(test)'
,
function
(data){
var
fid=$(
"select"
).val();
$.ajax({
url:
""
,
//请求地址
type:
"POST"
,
//请求方式
dataType:
"JSON"
,
//返回数据类型
data: {fid: fid},
//发送的参数
success:
function
(data){
$(
'#area option'
).hide();
var
proHtml =
''
;
for
(
var
o
in
data){
proHtml +=
'
}
$(
'#area'
).html(proHtml);
form.render();
},
error:
function
(){
//失败执行的方法
alert(
"error"
);
}
})
})
|
原理：JS获取option value, ajax到php，从MYSQL中取出数据，返回JSON，JQ控制二级栏目变化
HTML：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<
label
class
=
"layui-form-label"
>所属分类
<
div
class
=
"layui-input-inline"
>
<
select
name
=
"cid"
lay-filter
=
"test"
>
<
option
value="">
<
label
class
=
"layui-form-label"
>栏目
<
div
class
=
"layui-input-inline"
>
<
select
name
=
"cid"
id
=
"area"
>
<
option
value
=
"0"
>请选择栏目
|
AJAX：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
form.on(
'select(test)'
,
function
(data){
var
fid=$(
"select"
).val();
$.ajax({
url:
""
,
//请求地址
type:
"POST"
,
//请求方式
dataType:
"JSON"
,
//返回数据类型
data: {fid: fid},
//发送的参数
success:
function
(data){
$(
'#area option'
).hide();
var
proHtml =
''
;
for
(
var
o
in
data){
proHtml +=
'
}
$(
'#area'
).html(proHtml);
form.render();
},
error:
function
(){
//失败执行的方法
alert(
"error"
);
}
})
})
|