Maison > Article > développement back-end > Comment utiliser PHP pour implémenter le code des effets de liaison à trois niveaux basés sur layUI pendant le développement
Comment utiliser PHP pour implémenter le code des effets de liaison à trois niveaux basés sur layUI pendant le développement
- 不言original
- 2018-07-14 17:12:182202parcourir
Cet article présente principalement le code sur la façon d'utiliser PHP pour réaliser l'effet de liaison à trois niveaux basé sur layUI en développement. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer
Le développement backend utilise souvent le framework layUI pour rendre la page entière belle et élégante. Cependant, parfois certains effets natifs ne peuvent pas être utilisés sur le framework layUI. Par exemple, j'ai récemment rencontré l'effet de sélection d'une liaison à trois niveaux entre. provinces, villes et comtés. Différent des précédents, dans le framework layUI, vous devez faire attention à l'attribut lay-filter de select pour écouter les événements, et form.render() est nécessaire pour restituer. Pour résoudre ces deux problèmes, la liaison est nécessaire. ce n'est plus un problème. Laissez-moi le partager avec vous ci-dessous. Code d'implémentation :<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>基于 Layui form 组件的省市区级联的实现</title>
<link rel="stylesheet" href="http://www.zhengjinfan.cn/plugins/layui/css/layui.css" />
</head>
<body>
<div style="margin: 50px auto; ">
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">选择地区</label>
<div class="layui-input-inline">
<select name="province" lay-filter="province">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline" style="display: none;">
<select name="city" lay-filter="city">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline" style="display: none;">
<select name="area" lay-filter="area">
<option value="">请选择县/区</option>
</select>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="http://www.zhengjinfan.cn/plugins/layui/layui.js"></script>
<script type="text/javascript" src="http://www.zhengjinfan.cn/js/area.js"></script>
<script>
(function(){
var areaData=Area;
var $, $form,form;
var $selectProvince,$selectCity,$selectArea;
layui.use(['jquery', 'form'], function() {
$ = layui.jquery;
form = layui.form();
$form = $('form');
$selectProvince=$form.find('select[name=province]');
$selectCity=$form.find('select[name=city]');
$selectArea=$form.find('select[name=area]');
form.on('select(province)', function(data){
var value = data.value;
var d = value.split('_');
var code = d[0];
var count = d[1];
var index = d[2];
if(count > 0) {
loadCity(areaData[index].mallCityList,index);
$selectCity.parent().show();
} else {
$selectCity.parent().hide();
$selectArea.parent().hide();
$selectCity.find('[data-new=1]').remove();
$selectArea.find('[data-new=1]').remove();
form.render('select');
}
});
form.on('select(city)', function(data){
var value = data.value;
var d = value.split('_');
var code = d[0];
var count = d[1];
var index = d[2];
var areaIndex=d[3];
if(count > 0) {
loadArea(areaData[index].mallCityList[index].mallAreaList);
$selectArea.parent().show();
} else {
$selectArea.parent().hide();
}
});
form.on('select(area)', function(data){
});
loadProvince();
});
function loadProvince(){
for(var i=0,length=areaData.length;i<length;i++){
$selectProvince.append('<option value="'+ areaData[i].provinceCode + '_' + areaData[i].mallCityList.length + '_' + i + '">'+areaData[i].provinceName+'</option>')
}
form.render('select');
}
function loadCity(citys,areaIndex){
$selectCity.find('[data-new=1]').remove();
$selectArea.find('[data-new=1]').remove();
for(var i=0,length=citys.length;i<length;i++){
$selectCity.append('<option data-new ="1" value="'+ citys[i].cityCode + '_' + citys[i].mallAreaList.length + '_' + i + '_'+areaIndex+'">'+citys[i].cityName+'</option>')
}
form.render('select');
}
function loadArea(areas){
$selectArea.find('[data-new=1]').remove();
$selectArea.find('[data-new=1]').remove();
for(var i=0,length=areas.length;i<length;i++){
$selectArea.append('<option data-new ="1" value="'+ areas[i].areaCode+'">'+areas[i].areaName +'</option>')
}
form.render('select');
}
})()
</script>
</body>
</html>Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au PHP chinois. site web! Recommandations associées :
À propos de la fonction debug_backtrace() en PHP pour imprimer les informations de débogage sur le lieu de l'appel
Parlons-en à propos du développement du framework Injection de dépendances, conteneurs et modèles d'apparence (partie inférieure)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn