select 下拉联动跟php联动记录

最新推荐文章于 2021-08-05 13:31:17 发布

supper胖

最新推荐文章于 2021-08-05 13:31:17 发布

阅读量797

点赞数

CC 4.0 BY-SA版权

分类专栏：前端jq

本文链接：https://blog.youkuaiyun.com/qq_42222228/article/details/86529135

前端jq 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何通过JavaScript的onchange事件和AJAX技术，实现在两个下拉选择框之间的联动效果。当用户在第一个下拉框中选择一个选项时，会触发AJAX请求，将选择的参数传递给PHP后台。后台根据接收到的参数处理数据，形成新的选项数组，并返回。然后前端接收到响应数据后，更新第二个下拉框的内容，从而达到联动显示的目的。

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

想实现两个select下拉之间的联动
方法用的是onchange方法

 <div class="YanInput">
                                <select id="level" name="level" onchange="selectfun()">//自己定义一个方法函数
                                    <option selected="selected" >全部级别</option>
                                    <option value="蓝">蓝</option>
                                    <option value="黄">黄</option>
                                    <option value="红">红</option>
                                </select>
                            </div>

需要被改动的第二个下拉列表

 <div class="YanInput">
                                <select id="type" name="type">
                                    <option selected="selected">全部类别</option>
                                   <!--  <option value="墙体裂缝">墙体裂缝</option>
                                    <option value="墙砖脱落">墙砖脱落</option>
                                    <option value="墙面鼓包">墙面鼓包</option> -->
                                     <script type="text/javascript">
                                    $(document).ready(function(){
                                      var b = '{$types}'; //返回搜索状态女
                                      if(b!=null){
                                        $("#type").find("option[value='"+b+"']").attr("selected",true);
                                      }
                                    });
                                    </script>   
                            </select>                         
                        </div>

然后用ajax往后台传第一个选择的参数
先获取
在返回以后往第二个select里添加

<script type="text/javascript">
     function selectfun(){
        var params = {};
        params.num = $("#level option:selected").val();
        $.ajax({
            async: true,
            type: "POST",
            url: "../Common/getlevel",
            data: params,
            dataType: "json",
            success: function(data) {
                // alert(data);
             $("#type").html("");
             var tbodyinfo = '';
               for (var o in data) {
                 var l = data[o];
                 // alert(l);
                 var tr = " <option value="+l+">"+l+"</option>";
                 tbodyinfo += tr;
             }
            $("#type").html(tbodyinfo);
            }
        });
    }
</script>

后台写的方法数组

    public function getlevel(){
       $level =  $_POST['num'];
       $type = [];
       if($level=='蓝'){
        $type=['全部类别','零星破损'];
       }else if($level=='黄'){
        $type=['全部类别','疑似起鼓','疑似开裂','疑似变形'];
       }else if($level=='红'){
        $type=['全部类别','墙面起鼓','墙面开裂','墙体变形'];
       }
       $this->ajaxReturn($type,'json');
    }

然后就可以实现关联的效果！！