在之前文章中已经写过普通JS的二级联动效果了，但对于layui是无效的，因为layui不支持 onchange，layui把select重写了，只能按照layui的要求制作二级联动菜单

代码如下

特别注意的是 select要放在form里面才可以，否则无效，如果代码复制到到其他程序中，需要注意js的位置，位置不对也会无效

<!-- 引入 Layui CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css" />
 
<!-- 引入 Layui JS -->
<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>
<div>
    <select id="country" lay-filter="countryFilter">
        <option value="">请选择国家</option>
        <option value="china">中国</option>
        <option value="usa">美国</option>
        <!-- 可以继续添加更多国家 -->
    </select>
</div>
<div>
    <select id="province" lay-filter="provinceFilter">
        <option value="">请选择省份</option>
    </select>
</div>
<script>
layui.use(['form'], function(){
  var form = layui.form;
  var $ = layui.jquery;  // 注意这里的 $ 是 layui 的封装过的 jQuery，不是原生的 jQuery
  
  // 国家变化时更新省份列表
  form.on('select(countryFilter)', function(data){
    var country = data.value; // 获取选中的国家的值
    if(country === 'china'){
      $('#province').html('<option value="">请选择省份</option><option value="beijing">北京</option><option value="shanghai">上海</option>'); // 示例：中国有两个省份选项
    } else if(country === 'usa'){
      $('#province').html('<option value="">请选择省份</option><option value="california">加利福尼亚</option><option value="texas">德克萨斯</option>'); // 示例：美国有两个省份选项
    } else {
      $('#province').html('<option value="">请选择省份</option>'); // 如果没有匹配的国家，清空省份选项
    }
    form.render('select'); // 重新渲染 select 以应用新的选项和样式
  });
});
</script>