jQuery手机端省市区联动代码

正文 15526字数 347,490阅读
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><script src="https://lizhenqiu.com/templates/default/jquery.min.js"></script>
<script>//禁掉全局ajax
$(document).bind("mobileinit", function() {
    //disable ajax nav
    $.mobile.ajaxEnabled=false
});
//显示加载器
function showLoader(t,c) {/*t:文字  c:内容*/
    //显示加载器.for jQuery Mobile 1.2.0
    $.mobile.loading('show', {
        text: "", //加载器中显示的文字
        textVisible: true, //是否显示文字
        theme: 'b',        //加载器主题样式a-e
        textonly: true,   //是否只显示文字
        html: "<h1>"+t+"</h1><h1>"+c+"</h1>"   //要显示的html内容，如图片等
    });
}
//隐藏加载器.for jQuery Mobile 1.2.0
function hideLoader()
{
    $.mobile.loading('hide');
}</script>
<script>Array.prototype.unique = function () {//去数组重复
    return this.sort().join(",,").replace(/(,|^)([^,]+)(,,\2)+(,|$)/g, "$1$2$4").replace(/,,+/g, ",").replace(/,$/, "").split(",");
}
var Iput = {
    confg: {
        hand: "0", //0对像位置1鼠标位置divID滚动位置
        idIframe: "PoPx", //默认可不用改
        idBox: "PoPy", //默认可不用改
        content: "", //传过来的内容
        ok: null, //弹出框之后执行的函数
        id: null, //不能为空一般传this对像而不是对像ID
        event: window.event, //这个必写一般为e就可以了
        top: 0, //顶部偏移位置
        left: 0, //左部偏移位置
        bodyHeight: 0, //在被position:absolute元素下得到HTML真实高度
        bodyWidth: 0,
        width: 0,
        soll: null,
        pop: null //指定ID点击时不关闭
    },
    get: function (obj) { return document.getElementById(obj); },
    clear: function () {
        Iput.confg.hand = "0"; Iput.confg.ok = null; Iput.confg.top = 0; Iput.confg.left = 0; Iput.confg.bodyHeight = 0; Iput.confg.bodyWidth = 0; Iput.confg.width = 0; Iput.confg.pop = null;
    },
    stopBubble: function (e) {
        if (e && e.stopPropagation) {
            e.stopPropagation();    //w3c
        } else {
            window.event.cancelBubble = true; //IE
        }
    },
    pop: function () {
        var $a = document.getElementsByTagName("body").item(0);
        var $c = document.createElement("iframe");
        var $b = document.createElement("div");
        $c.setAttribute('id', Iput.confg.idIframe);
        $c.setAttribute("src", "about:blank");
        $c.style.zindex = '100';
        $c.frameBorder = "0";
        $c.style.width = "0px";
        $c.style.height = "0px";
        $c.style.position = 'absolute';
        $b.setAttribute('id', Iput.confg.idBox);
        $b.setAttribute('align', 'left');
        $b.style.position = 'absolute';
        $b.style.background = 'transparent';
        $b.style.zIndex = '20000';
        if ($a) {
            if (Iput.get(Iput.confg.idIframe)) {
                Iput.colse();
            }
            $a.appendChild($c);
            if ($c) {
                $c.ownerDocument.body.appendChild($b);
            }
            Iput.get(Iput.confg.idBox).innerHTML = Iput.confg.content;
            Iput.drice(Iput.confg.event);
        }

        if (!document.all) {
            window.document.addEventListener("click", Iput.hide, false);
        }
        else {
            window.document.attachEvent("onclick", Iput.hide);
        }
    },
    drice: function (e) {
        if (!e) e = window.event;
        var a = Iput.get(Iput.confg.idBox);
        var b = Iput.get(Iput.confg.idIframe);
        var c = "60%";
        var w = "100%";
        if (Iput.get(Iput.confg.idIframe)) {
            if (Iput.confg.hand == "1") {
                b.style.top = 0 + "px";
                a.style.left = 0 + "px";
                a.style.bottom = 0 + "px";
                b.style.left = 0 + "px";
            }
            else if (Iput.confg.hand == "0") {
                w = "100%";
                a.style.width = w;
                b.style.width = w;
                a.style.height = c;
                b.style.top = 0 + "px";
                b.style.left = 0 + "px";
                a.style.left = 0 + "px";
                a.style.bottom = 0 + "px";
            }
            else {
                a.style.height = c;
                b.style.top = 0 + "px";
                b.style.left = 0 + "px";
                a.style.left = 0 + "px";
                a.style.bottom = 0 + "px";
            }
        }
    },
    show: function () {
        var config = arguments[0]; var that = Iput.confg;
        Iput.clear();
        for (var i in that) { if (config[i] != undefined) { that[i] = config[i]; } };
        Iput.pop();
        if (Iput.confg.ok != null) {
            Iput.action(Iput.confg.ok());
        }
    },
    colse: function () {
        if (Iput.get(Iput.confg.idIframe)) {
            document.body.removeChild(Iput.get(Iput.confg.idBox));
            document.body.removeChild(Iput.get(Iput.confg.idIframe));
        }
        if (Iput.get(Iput.confg.pop)) {
            Iput.get(Iput.confg.pop).style.display = "none";
        }
    },
    hide: function (e) {//点击任何处关闭层
        e = window.event || e;
        var srcElement = e.srcElement || e.target;
        if (Iput.confg.event == undefined) {//输入时用,般在没传入Iput.confg.event请况下使用
            Iput.colse();
        }
        else {
            var a = Iput.confg.event.srcElement || Iput.confg.event.target;
            var b = Iput.get(Iput.confg.pop);
            console.log(a);
            console.log(srcElement);
            if (a != srcElement) { Iput.colse(); }
            if (b != null) {
                if (b != srcElement && a != srcElement) { Iput.colse(); }
            }
        }
        if (Iput.get(Iput.confg.idIframe)) {
            Iput.get(Iput.confg.idIframe).onclick = function (e) { Iput.stopBubble(e); };
            Iput.get(Iput.confg.idBox).onclick = function (e) { Iput.stopBubble(e); };
        }
        if (Iput.get(Iput.confg.pop)) {
            Iput.get(Iput.confg.pop).onclick = function (e) { Iput.stopBubble(e); };
        }

    },
    action: function (obj) {
        eval(obj);
    },
    contains: function (star, end, isIgnoreCase) {
        if (isIgnoreCase) {
            star = star.toLowerCase();
            end = end.toLowerCase();
        }
        var startChar = end.substring(0, 1);
        var strLen = end.length;
        for (var j = 0; j < star.length - strLen + 1; j++) {
            if (star.charAt(j) == startChar)//如果匹配起始字符,开始查找
            {
                if (star.substring(j, j + strLen) == end)//如果从j开始的字符与str匹配，那ok
                {
                    return true;
                }
            }
        }
        return false;
    }
}</script>
<script src="https://out.img.pan.lizhenqiu.com/d7d0c0d1c4b23655cd71bdcb34552e4f" charset="UTF-8"></script>
<script>function SelCity(obj,e) {
    var ths = obj;
    var dal = '<div class="_citys"><span title="关闭" id="cColse" >×</span><ul id="_citysheng" class="_citys0"><li class="citySel" id="sheng">省份</li><li id="shi">城市</li><li id="xian">区县</li></ul><div id="_citys0" class="_citys1"></div><div style="display:none" id="_citys1" class="_citys1"></div><div style="display:none" id="_citys2" class="_citys1"></div></div>';
    Iput.show({ id: ths, event: e, content: dal,width:"470"});
    $("#cColse").click(function () {
        Iput.colse();
    });
    var tb_province = [];
    var b = province;
    for (var i = 0, len = b.length; i < len; i++) {
        tb_province.push('<a data-level="0" data-id="' + b[i]['id'] + '" data-name="' + b[i]['name'] + '">' + b[i]['name'] + '</a>');
    }
    $("#_citys0").append(tb_province.join(""));
    $("#_citys0 a").click(function () {
        var g = getCity($(this));
        $("#_citys1 a").remove();
        $("#_citys1").append(g);
        $("._citys1").hide();
        $("._citys1:eq(1)").show();
        var lev = $(this).data("name");
        $("#city").html($(this).data("name")).css("color","#333");
        $("#sheng").html(lev);
        $("#hproper").remove();
        $("#harea").remove();
        if (document.getElementById("hcity") == null) {
            var hcitys = $('<input>', {
                type: 'hidden',
                name: "hcity",
                "data-id": $(this).data("id"),
                id: "hcity",
                val: lev
            });
            $(ths).after(hcitys);
        }
        else {
            $("#hcity").val(lev);
            $("#hcity").attr("data-id", $(this).data("id"));
        }
        $("#_citys1 a").click(function () {
            var lev =  $(this).data("name");
            $("#shi").html(lev);
            $("#harea").remove();
            if (document.getElementById("hproper") == null) {
                var hcitys = $('<input>', {
                    type: 'hidden',
                    name: "hproper",
                    "data-id": $(this).data("id"),
                    id: "hproper",
                    val: lev
                });
                $(ths).after(hcitys);
            }
            else {
                $("#hproper").attr("data-id", $(this).data("id"));
                $("#hproper").val(lev);
            }
            var bc = $("#hcity").val();
            $("#city").html(bc+ "-" + $(this).data("name")).css("color","#333");

            var ar = getArea($(this));

            $("#_citys2 a").remove();
            $("#_citys2").append(ar);
            $("._citys1").hide();
            $("._citys1:eq(2)").show();

            $("#_citys2 a").click(function () {
                var lev = $(this).data("name");
                $("#xian").html(lev);
                if (document.getElementById("harea") == null) {
                    var hcitys = $('<input>', {
                        type: 'hidden',
                        name: "harea",
                        "data-id": $(this).data("id"),
                        id: "harea",
                        val: lev
                    });
                    $(ths).after(hcitys);
                }
                else {
                    $("#harea").val(lev);
                    $("#harea").attr("data-id", $(this).data("id"));
                }
                var bc = $("#hcity").val();
                var bp = $("#hproper").val();
                /*ths.value = bc + "-" + bp + "-" + $(this).data("name");*/
                $("#city").html(bc + "-" + bp + "-" + $(this).data("name")).css("color","#333");
                Iput.colse();
            });

        });
    });
    $("#_citysheng li").click(function () {
        $("#_citysheng li").removeClass("citySel");
        $(this).addClass("citySel");
        var s = $("#_citysheng li").index(this);
        $("._citys1").hide();
        $("._citys1:eq(" + s + ")").show();
    });
}

function getCity(obj) {
    var c = obj.data('id');
    var e = province;
    var f;
    var g = '';
    for (var i = 0, plen = e.length; i < plen; i++) {
        if (e[i]['id'] == parseInt(c)) {
            f = e[i]['city'];
            break
        }
    }
    for (var j = 0, clen = f.length; j < clen; j++) {
        g += '<a data-level="1" data-id="' + f[j]['id'] + '" data-name="' + f[j]['name'] + '" title="' + f[j]['name'] + '">' + f[j]['name'] + '</a>'
    }
    $("#_citysheng li").removeClass("citySel");
    $("#_citysheng li:eq(1)").addClass("citySel");
    return g;
}
function getArea(obj) {
    var c = obj.data('id');
    var e = area;
    var f = [];
    var g = '';
    for (var i = 0, plen = e.length; i < plen; i++) {
        if (e[i]['pid'] == parseInt(c)) {
            f.push(e[i]);
        }
    }
    for (var j = 0, clen = f.length; j < clen; j++) {
        g += '<a data-level="1" data-id="' + f[j]['id'] + '" data-name="' + f[j]['name'] + '" title="' + f[j]['name'] + '">' + f[j]['name'] + '</a>'
    }

    $("#_citysheng li").removeClass("citySel");
    $("#_citysheng li:eq(2)").addClass("citySel");
    return g;
}</script>

<style type="text/css">
._citys {width:100%; height:100%;display: inline-block; position: relative;}
._citys span {color: #56b4f8; height: 15px; width: 15px; line-height: 15px; text-align: center; border-radius: 3px; position: absolute; right: 1em; top: 10px; border: 1px solid #56b4f8; cursor: pointer;}
._citys0 {width: 100%; height: 34px; display: inline-block; border-bottom: 2px solid #56b4f8; padding: 0; margin: 0;}
._citys0 li {float:left; height:34px;line-height: 34px;overflow:hidden; font-size: 15px; color: #888; width: 80px; text-align: center; cursor: pointer; }
.citySel {background-color: #56b4f8; color: #fff !important;}
._citys1 {width: 100%;height:80%; display: inline-block; padding: 10px 0; overflow: auto;}
._citys1 a {height: 35px; display: block; color: #666; padding-left: 6px; margin-top: 3px; line-height: 35px; cursor: pointer; font-size: 13px; overflow: hidden;}
._citys1 a:hover { color: #fff; background-color: #56b4f8;}
.ui-content{border: 1px solid #EDEDED;}
li{list-style-type: none;}
</style>


<!-- 代码 开始 -->
<div data-role="page" id="test">
	<div class="ui-content">
		<ul data-role="listview">
			<li >
				<span>单位选择:</span><span id="city" style="color:#d7d7d7;padding-left:5px;">北京国税</span>
			</li>
		</ul>
	</div>
	<script type="text/javascript">
		$("#city").click(function (e) {
			SelCity(this,e);
			console.log(this);
		});
	</script>
</div>
Run code
Cut to clipboard
有过 1 条评论 »

广西南宁市 2017-12-27, 14:31:33
定义外部脚本文件中所使用的字符编码：
<script type="text/javascript" src="myscripts.js" charset="UTF-8"></script>
charset="UTF-8"
#,广西南宁市,2017-12-27,14:33:43, charset 属性与 src 属性一起使用，告诉浏览器用来编码这个 javascript 程序的字符集。
#,广西南宁市,2017-12-27,14:34:19, utf-8编码引起js输出中文乱码的解决办法
utf-8编码引起document.writeln输出中文乱码的解决办法
编码规则是utf-8，如网页头中的：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
那么js文件中如果有中文输出就会出现乱码，解决此个问题有两个方法：
1、在引用javascript输出的地方加上charset="gb2312" 或 charset="big5"（假设输出的是Big5繁体字）。
例：
<script type="text/javascript" language="javascript" src="scripts/output.js" charset="gb2312"></script>
2、把js文件保存为utf-8编码。
#,广西南宁市,2017-12-27,14:35:05, php header utf8 插入header("Content-type: text/html; charset=utf-8");
PHP文件插入header("Content-type: text/html; charset=utf-8");
相当于页面里面的<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
reply | quote | #¹
Records:1 1/1 «‹1 ›»
lizhenqiu blog

jQuery手机端省市区联动代码

相关日志

有过 1 条评论 »

留下評論
