layui表单加文件 php_PHP加前端框架Layui的银行及支行二级联动实现方式

主要是搞清楚select标签的监听，select内容重置，以及Layui表单重新渲染的方式；

级联原始效果

一 select 标签监听

开户行

{volist name="banks" id="vo"}

{$vo.name}

{/volist}

请选择支行

layui通过lay-filter属性值，本文中的“bank”来监听标签。

1.1 layui标签监听方式

form.on('select(bank)', function(data){

$.post("{:url('company/setsubbanks')}",{code:data.value,id:false},function(res){

$("select[name='sub_bank_id']").empty();

var res = JSON.parse(res);

$("select[name='sub_bank_id']").append(res.data);

form.render();

});

});

二 select 内容重置

2.1 后台PHP方法

/**

* 通用支行获取方法

*/

public function setsubbanks(){

$supercode = $_POST['code'];

$thesubbank = $_POST['id'];

$subbanks = getSubBanks($supercode);

$string = '';

$select = '';

foreach($subbanks as $key => $value){

if(!empty($thesubbank)&&$value['code']==$thesubbank){

$select = "selected";

}else{

$select = '';

}

$string .= ''.$value['name'].'';

}

echo json_encode(["data"=>$string]);

}

2.2 标签内容填充

标签内容重置是jquery的操作，跟Layui框架的使用没多大关系，Layui基于jquery。上面的js代码里$("select选择器").empty();清空全部option，$("select选择器").append();给select标签填充内容。

三 Layui表单渲染

监听了标签的选择事件并给对应标签填充内容之后，操作并不立马生效，需要再次渲染layui表单。

form.render();或者form.render(‘select’);

四 小结

Layui框架是layer的升级，是后台开发首选。