<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>城市选择器</title>
<link rel="stylesheet"
	href="<?= RESOURCES ?>/layuiadmin/layuiadmin/layui/css/layui.css"
	media="all">
<link rel="stylesheet"
	href="<?= RESOURCES ?>/layuiadmin/layuiadmin/style/admin.css"
	media="all">
</head>
<style>
html {
    background-color: #ffffff;
    color: #666; 
}
form {
    margin: 0px;
}
</style>
<body>

<form class="layui-form layui-form-pane" action="">
 
 
        <div class="layui-inline" style="padding-left: 0.1%; ">
            <form class="layui-form layui-form-pane" action="javascript:;">
                <div class="layui-form-item" id="addressDiv">
                   
                    <div class="layui-input-inline">
                        <select name="P1" lay-filter="province" id="province">
                            <option></option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select name="C1" lay-filter="city" id="city">
                            <option></option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select name="A1" lay-filter="area" id="area">
                            <option></option>
                        </select>
                    </div>
                   <!--  <div class="layui-input-inline" id="addressDetail">
                        <input id="address" type="text" name="address" lay-verify="title" autocomplete="off"
                            placeholder="请输入具体地址" class="layui-input" style="width: 120%;">
                        <dl id="addressTip" class="addressDl">
                        </dl>
                    </div> -->
                </div>
            </form>
    </form>

</body>

<script src="<?= RESOURCES ?>/layuiadmin/layuiadmin/layui/layui.js"></script>
<script>
layui.config({
	base: '<?= RESOURCES ?>/layuiadmin/layuiadmin/' //静态资源所在路径
}).extend({
	index: 'lib/index' //主入口模块
}).use(['table', 'form', 'layer', 'jquery', 'element'], function() {
	var $ = layui.$;
    var form = layui.form;
 
    var pca = {};
    pca.keys = {};
    pca.ckeys = {};
    var citys ;
    $.ajaxSettings.async = false; 
    $.getJSON("<?= RESOURCES ?>/js/city.json", function (data){
    	citys = data; 
        //显示处理后的数据 
      })  
      
    pca.init = function (province, city, area, initprovince, initcity, initarea, form) {//jQuery选择器, 省-市-区
        var form = layui.form;
        if (!province || !$(province).length) return;
        $(province).html('');
        $(province).append('<option selected>全部</option>');
        for (var i in citys) {
            $(province).append('<option>' + citys[i].name + '</option>');
            pca.keys[citys[i].name] = citys[i];
        }
        form.render('select');
        if (initprovince) $(province).next().find('[lay-value="' + initprovince + '"]').click();
        if (!city || !$(city).length) return;
        pca.formRender(city);
         
        form.on('select(province)', function (data) {
            var cs = pca.keys[data.value];
            $(city).html('');
            $(city).append('<option>全部</option>');
            if (cs) {
                cs = cs.city;
                for (var i in cs) {
                    $(city).append('<option>' + cs[i].name + '</option>');
                    pca.ckeys[cs[i].name] = cs[i];
                }
                $(city).find('option:eq(1)').attr('selected', true);
            }
            form.render('select');
            $(city).next().find('.layui-this').removeClass('layui-this').click();
            pca.formHidden('province', data.value);
            $('.pca-label-province').html(data.value);//此处可以自己修改 显示的位置, 不想显示可以直接去掉
            pca.formSubmit();
        });
        if (initprovince) $(province).next().find('[lay-value="' + initprovince + '"]').click();
        if (initcity) $(city).next().find('[lay-value="' + initcity + '"]').click();
        if (!area || !$(area).length) return;
        pca.formRender(area);
        form.on('select(city)', function (data) {
            var cs = pca.ckeys[data.value];
            $(area).html('');
            $(area).append('<option>全部</option>');
            if (cs) {
                cs = cs.area;
                for (var i in cs) {
                    $(area).append('<option>' + cs[i] + '</option>');
                }
                $(area).find('option:eq(1)').attr('selected', true);
            }
            form.render('select');
            $(area).next().find('.layui-this').removeClass('layui-this').click();
            pca.formHidden('city', data.value);
            $('.pca-label-city').html(data.value);	//此处可以自己修改 显示的位置, 不想显示可以直接去掉
            pca.formSubmit();
        });
        form.on('select(area)', function (data) {
            pca.formHidden('area', data.value);
            $('.pca-label-area').html(data.value);	//此处可以自己修改 显示的位置, 不想显示可以直接去掉
            
            pca.formSubmit();
        });
        if (initprovince) $(province).next().find('[lay-value="' + initprovince + '"]').click();
        if (initcity) $(city).next().find('[lay-value="' + initcity + '"]').click();
        if (initarea) $(area).next().find('[lay-value="' + initarea + '"]').click();
    }
 
    pca.formRender = function (obj) {
        $(obj).html('');
        $(obj).append('<option>全部</option>');
        form.render('select');
    }
 
    pca.formHidden = function (obj, val) {
        if (!$('#pca-hide-' + obj).length)
            $('body').append('<input id="pca-hide-' + obj + '" type="hidden" value="' + val + '" />');
        else
            $('#pca-hide-' + obj).val(val);
    }
 
   pca.formSubmit = function(){
	   //console.log(decodeURIComponent($("form").serialize())); //输出字符串
	   var cityStr= decodeURIComponent($("form").serialize());  
	   cityStr = cityStr.replace('P1=', '');
	   cityStr = cityStr.replace('&C1=', '-');
	   cityStr = cityStr.replace('&A1=', '-');
	   //获取父框架的元素
	    var _ghyOb1=$('#<?php echo $_GET["field"]?>', window.parent.document);
	    _ghyOb1.val(cityStr);
   }
    
   
 
 //设定默认值
   var _ghyOb=$('#<?php echo $_GET["field"]?>', window.parent.document);
   if(_ghyOb.val().trim()!="")
   {
   	var selectValue=_ghyOb.val().trim();
   	var selectValueArray=selectValue.split('-');
    
    pca.init('select[name=P1]', 'select[name=C1]', 'select[name=A1]', selectValueArray[0], selectValueArray[1], selectValueArray[2]);
   	
   } else{
	   pca.init('select[name=P1]', 'select[name=C1]', 'select[name=A1]', '', '', '');
   }
   

 
 
	 
});

	
</script>

</html>
