级联效果

最新推荐文章于 2022-02-19 21:45:19 发布

代码等待被码

最新推荐文章于 2022-02-19 21:45:19 发布

阅读量441

点赞数

CC 4.0 BY-SA版权

分类专栏： xf

本文链接：https://blog.youkuaiyun.com/qq_40018938/article/details/80473489

xf 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何实现级联效果，即根据第一个下拉列表的选择，动态更新第二个下拉列表的内容。通过在前端设置onchange事件，利用Ajax将选定值发送到后端，后端根据接收到的值查询相应内容，再返回给前端更新第二个下拉框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：

要根据第一个下拉列表的变化，让第二个下拉列表显示和第一个列表对应的内容，最简单的方法就是展示第一个下拉列表中的所有，在select中写入onchange事件，通过ajax把选取到的值传到后端，因为是对应显示，所以第二个下拉框内容一定和第一个的值有关系，在后端根据传过来的值查找第二个下拉框要显示的内容，拼接好选框课内容，返回给前端，在ajax函数中替换第二个下拉框中的内容。大概思路就是这样。

function onchange(obj) {
   $.post('select_cata',{cata_id:$(obj).val()},function (res) {
           $('[name=cla_id_id]').html(res);
         })
      }

     $res_str = "<option value = ''>请选择...</option>";
        foreach ($res as $v){
            $res_str .="<option value='".$v->id."'>".$v->cla_name."</option>";
        }
        echo $res_str;//返回拼接好的结果给前端展示；