美文网首页
select2组件二级联动

select2组件二级联动

作者: 奔跑的大龙猫 | 来源:发表于2018-12-17 19:17 被阅读73次

    最近开发时,用到select2组件,主要是select2二级联动,选择市级以后,街道一栏自动展示该市下所有的街道。这个小功能主要用到几个小知识点:

    $("#inDistrict").on("select2:select", function(e) {
        var inDistrict = $("#inDistrict option:checked").val();//获取select的值
    
        $.ajax({
    
            type : "post",
            url : "/capital/a/sys/area/shanghaiStreetTreeData",
            data : {inDistrict : inDistrict},
            dataType : "json",
            success : function(mapList) {
                    console.log(mapList);
                    for (var i = 0; i < mapList.length; i++) {
                         mapList[i].text = mapList[i].name;
                    }
                    var jsonArray = JSON.stringify(mapList);
                    var json = JSON.parse(jsonArray);
                    $("#onStreet").select2({
                      data : json
                    });
    
            }
          });
    });
    

    知识点1:利用ajax获取街道的值

    注意:
    ①.URL地址的路径
    ②.ajax返回的街道数据为数组格式。

    知识点2:数组与json的转换

    ①.数组转String

    var jsonArray = JSON.stringify(mapList);
    

    ②.String转JSON

    var json = JSON.parse(jsonArray);
    

    知识点3:select2的赋值

    select2赋值个格式:

    $("#onStreet").select2({
         data : json
     });
    

    注意data的格式为json

    相关文章

      网友评论

          本文标题:select2组件二级联动

          本文链接:https://www.haomeiwen.com/subject/tvwckqtx.html