ホームページ >バックエンド開発 >PHPチュートリアル >開発中に PHP を使用して、layUI に基づいた 3 レベルのリンケージ効果のコードを実装する方法
この記事では主に、開発中のlayUIをベースに3層連携効果をPHPで実現するコードを紹介します。参考になる価値があるので、みんなに共有します。困っている友達は参考にしてください
バックエンド開発では、ページ全体を美しくエレガントに見せるために、layUI フレームワークを使用することがよくありますが、一部のネイティブ効果は、layUI フレームワークでは使用できない場合があります。たとえば、最近、3 レベルのリンクの選択効果に遭遇しました。州、市、郡の間。これまでと異なり、layUI フレームワークでは、イベントをリッスンするために select のlay-filter 属性に注意する必要があり、再レンダリングには form.render() が必要です。これら 2 つの問題を解決するために、リンケージは次のようになります。もう問題ありません。以下にそれを共有させてください。
実装コード:
<!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>
以上がこの記事の全内容です。皆様の学習に少しでもお役に立てれば幸いです。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
呼び出し場所でデバッグ情報を出力する PHP の debug_backtrace() 関数について
見てみましょうフレームワーク開発についての話 依存関係の注入、コンテナー、および出現パターン (下部)
以上が開発中に PHP を使用して、layUI に基づいた 3 レベルのリンケージ効果のコードを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。