js省市区

Posted 2022-01-28 chengyalin

<!--省市区街-->
<div class="selectAllArea">
    <div class="selectAllChoose">
        <dl class="selectssqj select1" style="margin-left: 12px;">
            <dt><span class="shengName" data-value="">请选择省份</span><img src="yyimg/up2.png"  class="upOrDownselect"></dt>
            <dd>
                <ul class="sheng">
                    <!--<li><a href="#">12131</a></li>-->
                </ul>
            </dd>
        </dl>
        <dl class="selectssqj select2">
            <dt><span class="shiName" data-value="">请选择城市</span><img src="yyimg/up2.png"  class="upOrDownselect"></dt>
            <dd>
                <ul class="shi">
                </ul>
            </dd>
        </dl>
        <dl class="selectssqj select3">
            <dt><span class="quName" data-value="">请选择区域</span><img src="yyimg/up2.png"  class="upOrDownselect"></dt>
            <dd>
                <ul class="qu">
                </ul>
            </dd>
        </dl>
    </div>
    <div class="twobtnS">
        <a href="#" class="twobtnChoose cancelBtn">取消</a>
        <a href="#" class="twobtnChoose sureBtn">确定</a>
    </div>
</div>

/*省市区街*/
.selectAllAreawidth: 568px;border: 1px solid rgba(0,160,233,1);height: 124px;position: fixed;top: 136px;left: 14px;z-index: 20;background: rgba(2,16,45,.8);padding-top: 10px;display: none;
.selectssqjposition:relative;float:left;margin: 0 5px;
.selectssqj dtfont-weight: normal;border:1px solid rgba(4,44,80,1);width: 172px;height: 32px;display:inline-block;line-height: 32px;padding-left:10px;cursor:pointer;padding-right:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;position:relative;z-index:99;color: #fff;background: rgba(4,44,80,1);border-radius: 4px;
.selectssqj dt .upOrDownselectposition: absolute;top:12px;right: 10px;
.selectssqj dt:hover,.selectssqj dt.curborder:1px solid #409DFE;box-shadow:0 0 3px #409DFE;
.selectssqj ddposition:absolute;left:0;top:29px;border: 1px solid rgba(0,160,233,1);display:none;background: rgba(4,44,80,1);z-index: 11;
.selectssqj dd ulpadding: 0;width: 170px;max-height:250px;overflow:auto;margin-bottom: 0;
.selectssqj dd ul li aline-height:28px;display:block;padding:0 8px;color: rgba(255,255,255,.5);
.selectssqj dd ul li a:hoverbackground: rgba(35,218,238,.13);color: #fff;

/*省市区街按钮*/
.twobtnSwidth: 147px;height: 28px;position: absolute;bottom: 25px;left: 204px;z-index: 10;
.twobtnS .twobtnChoosedisplay: block; width: 60px;height: 26px;line-height: 26px;border-radius:4px;font-size: 14px;color: #fff;text-align: center;
.twobtnS .twobtnChoose.cancelBtnfloat: left;background:rgba(2,17,46,1);border:1px solid rgba(0,160,233,1);
.twobtnS .twobtnChoose.sureBtnfloat: right;background:#00A0E9;border:1px solid rgba(0,160,233,1);
.twobtnS .twobtnChoose:hovercolor: #fff;

showProvinces(null, 0, 1);
function showProvinces(obj, parentId, regionlevel) 
   
    $.ajax(
        type : "post",
        dataType : "json",
        url : "" + getRootPath() + "/admin/city!list?parentId=" + parentId
            + "&regionlevel=" + regionlevel + "",
        success : function(result) 
            if (result.success) 
                var data = result.cityList;
                var htmlStr = "";

                for (var i = 0; i < data.length; i++) 
                   if(regionlevel != 3)
                      htmlStr += "<li onclick=‘showProvinces(this, " + data[i].id + ", "+(regionlevel+1)+")‘ value=‘" + data[i].id + "‘ class=‘selectV‘><a class=‘optionV‘ href=\"#\" >" + data[i].regionName + "</a></li>";
                   else
                      htmlStr += "<li value=‘" + data[i].id + "‘ class=‘selectV‘><a class=‘optionV‘ href=\"#\" >" + data[i].regionName + "</a></li>";
                    // console.log(data[i].id)
                
                if (regionlevel == 1) 
                    $(".sheng").html(htmlStr);
                    $(‘.shengName‘).text("请选择省份")
                else if (regionlevel == 2) 
                    $(".shi").html(htmlStr);
                    $(‘.shiName‘).text("请选择城市")
                    $(‘.quName‘).text("请选择区域")
                else if (regionlevel == 3) 
                    $(".qu").html(htmlStr);
                    $(‘.quName‘).text("请选择区域")
                
            
            var that = $(".select" + regionlevel);
            var s=$(that[0]);
            var z=parseInt(s.css("z-index"));
            var dt=$(that[0]).children("dt");
            var dtValue=$(that[0]).children("dt").children("span");
            var dd=$(that[0]).children("dd");
            var _show=function()dd.slideDown(200);dt.addClass("cur");s.css("z-index",z+1);;   //展开效果
            var _hide=function()dd.slideUp(200);dt.removeClass("cur");s.css("z-index",z);;    //关闭效果
            dt.unbind(‘click‘);
            dt.bind(‘click‘, function()dd.is(":hidden")?_show():_hide(););
            dd.find("a").unbind(‘click‘);
            dd.find("a").bind(‘click‘, function()
               dtValue.html($(this).html());//文本
                dtValue.attr("data-value", parentId);//id
                console.log(parentId)
               _hide();
            );     //选择效果（如需要传值，可自定义参数，在此处返回对应的“value”值 ）
            $("body").click(function(i) !$(i.target).parents(".selectssqj").first().is(s) ? _hide():"";);

        ,
        error : function() 
            message_box.show(‘获取数据失败！‘, ‘error‘);
        
    );