首页 > 技术文章 > 三级联动

lz19940602 2017-09-23 16:02 原文

页面:

<select  name="xqcate1" id="xqcate1" style="margin-left:20px;width:150px;color:black;" class="form-control m-b chosen-select">
<option value="">==请选择==</option>

</select>

<select name="xqcate2" id="xqcate2" style="margin-left:20px;width:150px;color:black;" class="form-control m-b chosen-select">
<option value="">==请选择==</option>

</select>

控制器:

//三级联动
public function san()
{
$xqcate = input("xqcate");
$da = Db::name('xqcate')->where('pid', $xqcate)->select();

if (count($da) > 0) {
echo json_encode(array('code'=>200,'info'=>$da));
exit;
}else{
echo json_encode(array('code'=>400));
}
}

//三级联动
public function four()
{
$xqcate1 = input("xqcate1");
$dat = Db::name('xqcate')->where('pid', $xqcate1)->select();

if (count($dat) > 0) {
echo json_encode(array('code'=>200,'info'=>$dat));
exit;
}else{
echo json_encode(array('code'=>400));

}
}

ajax:

$("#xqcate").change(function () {
var xqcate = $(this).val();
$.ajax({
url: "/otadmins/achievement/san",
Type: "POST",
data: {xqcate: xqcate},
dataType: "JSON",
success: function (data) {
$('#xqcate1').empty();
$('#xqcate2').html('<option value="">==请选择==</option>');
var html = '<option value="">==请选择==</option>';
if (data.code == 200) {
$.each(data.info,function(index,comment){

html += "<option value='"+comment['id']+"'>"+comment['name']+"</option>";
});
}
$('#xqcate1').append(html);
}
});
});


$("#xqcate1").change(function () {
var xqcate = $(this).val();
$.ajax({
url: "/otadmins/achievement/san",
Type: "POST",
data: {xqcate: xqcate},
dataType: "JSON",
success: function (data) {
$('#xqcate2').empty();
var html = '<option value="">==请选择==</option>';
if (data.code == 200) {
$.each(data.info,function(index,comment){

html += "<option value='"+comment['id']+"'>"+comment['name']+"</option>";
});
}
$('#xqcate2').append(html);
}
});
});

推荐阅读