jQuery移动端四级联动世界地区选择代码



185 738 247



特效描述:jQuery移动端 四级联动 世界地区选择,

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/ydui.css?rev=@@hash"/>
<link rel="stylesheet" href="css/demo.css"/>

2. 引入JS

<script src="js/ydui.flexible.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/ydui.citys.js"></script>
<script src="js/ydui.js"></script>

3. HTML代码

<section class="g-flexview">
    <section class="g-scrollview">
        <div class="m-celltitle">默认调用</div>
        <div class="m-cell">
            <div class="cell-item">
                <div class="cell-left">所在地区:</div>
                <div class="cell-right cell-arrow">
                    <input type="text" class="cell-input" readonly id="J_Address" value="" placeholder="请选择收货地址">
                </div>
            </div>
        </div>
        <div class="m-celltitle">设置默认值</div>
        <div class="m-cell">
            <div class="cell-item">
                <div class="cell-left">所在地区:</div>
                <div class="cell-right cell-arrow">
                    <input type="text" class="cell-input" readonly id="J_Address2" value="中国 新疆维吾尔自治区 乌鲁木齐市 天山区" placeholder="请选择收货地址">
                </div>
            </div>
        </div>
    </section>
</section>
<script>
    /**
     * 默认调用
     */
    !function () {
        var $target = $('#J_Address');
        $target.citySelect();
        $target.on('click', function (event) {
            event.stopPropagation();
            $target.citySelect('open');
        });
        $target.on('done.ydui.cityselect', function (ret) {
        	console.log(ret)
            $(this).val(ret.country + ' ' + ret.provance + ' ' + ret.city + ' ' + ret.area);
        });
    }();
    /**
     * 设置默认值
     */
    !function () {
        var $target = $('#J_Address2');
        $target.citySelect({
        	country: '中国',
            provance: '新疆维吾尔自治区',
            city: '乌鲁木齐市',
            area: '天山区',
            id: '1-31-330-3033'
        });
        $target.on('click', function (event) {
            event.stopPropagation();
            $target.citySelect('open');
        });
        $target.on('done.ydui.cityselect', function (ret) {
        	console.log(ret);
            $(this).val(ret.country + ' ' + ret.provance + ' ' + ret.city + ' ' + ret.area);
        });
    }();
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 弹出层拖动 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 切换按钮 表单 表单美化 表单插件 表单美化插件 提示框/弹出层 文字切换 文字选项卡 选项卡自动切换 三级联动 城市选择 城市选择器

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到