文章目录

• Select三级联动选择—基于Layui
• • 一、需求
  • 二、分析及前端代码
  • 三、后端实现

    Select三级联动选择—基于Layui

    Layui是一套开源的 Web UI 组件库。layui采用自身极简的模块化规范，并遵循原生 HTML/CSS/JS 的开发模式，极易上手，开箱即用。是前后端初学者必不可少的学习神器。（ps：对于笔者这种前端页面写的很丑的人来说简直是福音啊！）

    
    （图片来源网络，侵删）

    使用的方式主要有两种，一种直接下载layui的源码使用；一种是使用在线引用（即通过非下载的方式进行使用）。笔者更喜欢通过下载源码来使用。

    附上Layui的网址：https://layui.org.cn/index.html

    

    一、需求

    需求是这样的，自己在写一个商城项目的时候，涉及到了供应商提交的表单。表单中有个供应商地址选择运用到了select选择框。以前刚学html的时候，也写过很多次的选择框。但是选择框中的内容选项option都已经是固定的了。如下所示：

        --Please choose an option--
        Dog
        Cat
        Hamster
        Parrot
        Spider
        Goldfish
    
    
    

    这次项目的需求是需要联动选择国内所有的省市县（区）三级，如果以最原始的写法，那无疑是灾难。因此我尝试换一种方式，即从数据库中读取选择框的内容，并且多个选择框之间是联动选择的（即如果选择了广东省，那么你将选不到杭州市，只能从广东省的所有地级市中选择）。

    二、分析及前端代码

    首先是需要将整个供应商需要提交的表单书写，形成一个大致的轮廓。

    
    （图片来源网络，侵删）

    要从后台的数据库中读取到数据，就需要前后端交互，因此在本次项目中三级联动的实现主要依靠jQuery来实现。

    笔者都将jQuery和layui的源码下载下来，之后直接附在项目中。

    本文主要针对三个选择框的联动选择，因此将其他内容进行了简化。代码附上

    
    
        
        供应商登记
        
        
        
        
    
    
            
    
                
    
                    
    供应商
                
              
                  
    
                      注册地址
                      
    
                          
                          
                          
                          
                          
                          
                      
                  
              
            
    
    
    

    在这个编码中注册地址使用三个select选择框进行表示。lay-filter起到类似选择器的作用。

    实现的效果是：当使用者选中了省，那么系统才会加载地级市，选择了地级市才会加载区。如果有人有意先跳过选择，那么将无法选择任何内容。这样保证了选择的正确性以及简便性。

    这样的实现需要搭配js才能实现响应式加载的效果

    
    （图片来源网络，侵删）

    layui.use('form',function () {
        form = layui.form;
        loadCities();
        loadRegions();
    })
    layui.use('layer',function () {
         layer=layui.layer;
    })
    //页面开始就加载省份
    function load() {
        $().ready(function () {
            $.ajax({
                type: 'post',
                url: '/getProvince',
                cache: false,
                async: true,
                dataType: 'json',
                success(data) {
                    console.log(data)
                   let selectProvince= document.getElementById("province");
                    selectProvince.add(new Option("请选择对应的省份","0"))
                    let option=null;
                    for (let i = 0; i