Loading...
墨滴

Forrest

2021/10/10  阅读:21  主题:默认主题

不用Ajax实现二级级联

不使用 Ajax 实现下拉列表的二级级联

由来:在做项目时,下拉的二级级联菜单一般可以通过 Ajax 来实现,但是有些场景下,因为是一些简单的数据,所以不想通过 Ajax 来实现,自己做了一些尝试,最终成功实现,分享一下,希望对有需要的小伙伴有一些帮助^_^

示例:颜色、尺码级联

思路:

  • 利用数组的键值特性,提前把数据传递到页面,然后在页面使用 jQuery 操作数组,当颜色下拉变化时,改变尺码下拉的内容。

实现步骤

  1. 服务器端准备颜色、尺码的键值数组
  2. 前端接收数据
  3. jQuery 操作数据

1. 服务器端准备颜色、尺码的键值数组

php 代码示例:

//此处是直接模拟数据,实际需要从数据库获取数据,组合成数组
//注意:一定要组合成如下:键==>值对应的,方便前台使用
$arr=[
  "半白"=>['M','L'],
  "藏青色"=>['L','LL']
];

//为了方面前台操作,把数组转换成json字符串
$colorsize_list=json_encode($arr,JSON_UNESCAPED_UNICODE);

//传递数据至前台页面(我用的的时ThinkPHP5.0框架)
//如果使用别的框架的话,传递方法请自行修改
$this->assign('colorsize_list',$colorsize_list);

2. 前端接收数据

html 代码:(这里使用了 span,然后设置 display:none; 也可以使用 input。)

<span id="colorsize_list" style="display: none;">
{$colorsize_list}
</span>

前端布局 html 代码:

<div class="row">
 <div class="col-md-2">
  <select name="color_group[]" class="form-control notzero">
    <option value="0">请选择</option>
    {volist name="color_group_list" id="cglist"}
     <option value="{$cglist.color_group}">{$cglist.color_group}</option>
    {/volist}
  </select>
  <div class="error"></div>
 </div>
 <div class="col-md-1">
  <select name="size[]" class="form-control">
  </select>
 </div>
</div>

3. jQuery 操作数据

js 代码:

<script type="text/javascript">

$(function () {

  //接收传递过来的颜色、尺码 json字符串
  var jsonstr=$("#colorsize_list").html();
  //把json字符串 转换成 数组
  var obj=jQuery.parseJSON(jsonstr);

  //******颜色下拉框 改变内容事件
 $("[name='color_group[]']").change(function(){

    //获取下拉框选中内容
  var val=$(this).find("option:selected").text();
    if(val==0){
        return;
    }

    //获得被选中的颜色 所对应的数组
  var selectObj=obj[val];

    //获得页面的尺码的对象
    //注意:页面布局不同,此处代码需自行修改!
  var nextSize=$(this).parent().next().find('[name="size[]"]');

  //清空尺码下拉框内容
  nextSize.empty();

  //添加尺码列表
  selectObj.forEach(function(item){
   var temp=$("<option>"+item+"</option>");
   nextSize.append(temp);
  });

 });

});

</script>

Forrest

2021/10/10  阅读:21  主题:默认主题

作者介绍

Forrest