layui 地区三级联动 form select 渲染的实例

如下所示：

html

<!-- 城市三级联动 -->

 <div class=\"layui-form-item\">
  <label class=\"layui-form-label require_start\"><span>所在城市 :</span></label>

  <div class=\"layui-input-inline\">
   <select id=\"province\" name=\"province\" lay-filter=\"province\">
    <option id=\"province_init\" value=\"0-0\">请选省份</option>
   </select>
  </div>
  <div class=\"layui-input-inline\">
   <select id=\"city\" name=\"city\" lay-filter=\"city\">
    <option id=\"city_init\" value=\"0-0\">请选择市</option>
   </select>
  </div>
 </div>

js

// 初始数据
 var areaData = <?php echo json_encode($cities); ?>;
 var $form;
 var form;
 var $;
 layui.use([\'jquery\', \'form\'], function() {
  $ = layui.jquery;
  form = layui.form;
  $form = $(\'form\');
  loadProvince();
  console.log(areaData);
  var pi = 0;

  for (var index in areaData) {
   if (areaData[index][\'provinceCode\'] == {{ $assset_auth->province or 0 }}) {
    var proid = {{$assset_auth->province}};
    console.log(proid+\'---proid\') //当前是355
    var province_value = areaData[index][\'provinceCode\']+\'_\'+areaData[index][\'mallCityList\'].length+\'_\'+pi;
    console.log(province_value+\'--------province_value\') //当前是 355_1_42

    $(\"#province\").find(\"option[value=\'\"+province_value+\"\']\").attr(\"selected\", true);
    // 载入city
    loadCity(areaData[index][\'mallCityList\']);

    var ci = 0;
    for (var ci in areaData[index][\'mallCityList\']) {
     if (areaData[index][\'mallCityList\'][ci][\'cityCode\'] == {{ $assset_auth->city or 0 }}) {
      var city_value = areaData[index][\'mallCityList\'][ci][\'cityCode\']+\'_0_\'+ci;
      $(\"#city\").find(\"option[value=\'\"+city_value+\"\']\").attr(\"selected\", true);
     }
     ci++;
    }
   }
   pi++;
  }
  layui.form.render(\'select\',\'boardFilter\');
 });

这是select 选择证件 额外赠送

<!-- 选择证件类型行内判断 -->

 <div class=\"layui-form-item\">
  <label class=\"layui-form-label\"><span>证件类型 :</span></label>
  <div class=\"layui-input-inline\">
   <select name=\"card_category\">
    <option value=\"\" selected>请选证件类型</option>
    <option value=\"1\" {{ $param!==NULL ? ($assset_auth->card_category==1 ? \'selected\' : \'\') : \'\' }}>身份证</option>
    <option value=\"2\" {{ $param!==NULL ? ($assset_auth->card_category==2 ? \'selected\' : \'\') : \'\' }}>军官证</option>
    <option value=\"3\" {{ $param!==NULL ? ($assset_auth->card_category==3 ? \'selected\' : \'\') : \'\' }}>护照</option>
    <option value=\"4\" {{ $param!==NULL ? ($assset_auth->card_category==4 ? \'selected\' : \'\') : \'\' }}>港澳通行证</option>
    <option value=\"5\" {{ $param!==NULL ? ($assset_auth->card_category==5 ? \'selected\' : \'\') : \'\' }}>台胞证</option>
   </select>
  </div>
 </div>

总结一句

后台PHP开发 加载数据库字段 让你默认选中 某一个城市

关键步骤在 layui.form.render(‘select\’,\’boardFilter\’);

以上这篇layui 地区三级联动 form select 渲染的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。