js手机联动选择地区仿ios 开源git

js手机联动选择地区

前言:由于网上找到了一个mobiscrool,比较全,但是不开源,只能试用15天,正式版竟然要三千块钱,穷人只能自己动手,写了个只针对弹窗地区选择的。

本站点所有的资源均在github上可以查看源代码 GitHub

demo地址请点击这里 http://www.lovewebgames.com/jsmodule/mobile-select-area.html

mobile-select-area

手机联动选择地区

用法

##注:依赖于[dialog](https://github.com/tianxiangbing/dialog)
    <!DOCTYPE>
    <html>
        <head>
            <title>选择地区</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
            <link rel="stylesheet" type="text/css" href="../dist/mobile-select-area.css">
            <link rel="stylesheet" type="text/css" href="../dist/dialog.min.css">
            <script type="text/javascript" src="../dist/zepto.js"></script>
            <script type="text/javascript" src="../dist/dialog.js"></script>
            <script type="text/javascript" src="../dist/dialog-jquery.min.js"></script>
            <script type="text/javascript" src="../dist/mobile-select-area.js"></script>
        </head>
        <body>
            <input type="text" id="txt_area" value="浙江省 杭州市 滨江区"/>
            <input type="hidden" id="hd_area" value="1,1,1"/>
            <script>
            var selectArea = new MobileSelectArea();
            selectArea.init({trigger:$(‘#txt_area‘),value:$(‘#hd_area‘).val(),data:‘data.json‘});
            </script>
        </body>
    </html>

  

属性及方法

trigger:

    触发弹窗的DOM元素 ,可以是input或其他

value:

    初始值,

data:

    当data为json对象时可以直接解析
    当data为string发送ajax请求后返回json,格式如下:
  {
        "data": [{
            "id": 1,
            "name": "浙江省",
            "child": [{
                "id": "1",
                "name": "杭州市",
                "child": [{
                    "id": 1,
                    "name": "滨江区"
                }]
            }]
        }, {
            "id": 2,
            "name": "江苏省",
            "child": [{
                "id": "1",
                "name": "南京",
                "child": [{
                    "id": 1,
                    "name": "解放区"
                }]
            }]
        }, {
            "id": 3,
            "name": "湖北省"
        }]
    }

  

callback:

    选中后的回调,默认有填充trigger的value值,以及赋值它后面紧跟着的hidden的value值,以逗号分隔id,空格分隔文字
时间: 2024-07-30 19:43:05

js手机联动选择地区仿ios 开源git的相关文章

[js开源组件开发]js手机联动选择日期 开源git

js手机联动选择日期 这里在前面的<js手机联动选择地区>的基础上,改造数据源之后形成的一个日期的选择器,当然你可以使用之前的PC上模式的<日期控件>,它同时也支持手机端,http://www.cnblogs.com/tianxiangbing/p/calendar.html. 效果图如下: mobile-select-date 手机联动选择日期 这个组件是从mobile-select-area 继承过来的,所以调用方法基本相同 DEMO请点击这里  http://www.love

Android系统下用js自定义gesture事件(仿ios实现移动端事件一致)

.katex { display: inline-block; text-align: initial; } .katex { font-family: Consolas, Inconsolata, Courier, monospace; line-height: 1.2; white-space: nowrap; text-indent: 0px; text-rendering: auto; font-size: 1em; } .katex * { } .katex .katex-html {

4个好用的JS联动选择插件

jQuery City Select 一个简单的jQuery省市联动插件,可以自定义JSON字典实现其他内容的联动选择菜单. PCAS省.市.地区联动选择JS封装类 PCAS可能是国内使用人数最多的JS省市联动菜单封装类,也是使用方法最简单的省市联动菜单.不过作者已经很久没更新过地址库的数据了. jQuery Dependent Selects jQuery Dependent Selects只需要在option中指明各层级之间的依赖关系,就可以自动生成多级联动下拉菜单.在小型的项目里是个不错的

ios收货地址三级联动选择

这次的需求,是省市区三级联动选择,并且市的选择要根据省的id,然后区的选择要根据市的id 每次都要进行网络请求,关键代码,其实是 //监听轮子的移动 - (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component; 然后我就上传我的代码,这个代码我也是根据别人的修改的,因为需求不一样 1,创建一个View // //  IWAreaPickerVi

7.Android开源项目WheelView的时间和地址联动选择对话框

类似WheelView的时间和地址联动选择对话框在现在App经常看到,今天小结下. 主布局界面: 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 android:layout_width="match_parent" 3 android:layout_height="match_parent" 4 android:background=

jquery areapicker 地区选择器 为手机浏览器度身定做. 一行代码完成手机上的地区选择

使用方法: 1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>areapicker demo</title> 6 <meta name="viewport" content="w

vue仿京东省市区三级联动选择组件

工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,显示效果如下:使用vue2.0开发 html代码如下 <!--居住地址三级联动选项--> <section class="showChose" v-show="showChose"> <section class="address"> <secti

JS替换系统默认对话框,仿IOS风格

Alert alert("这个是一个alert弹窗"); Alert 自定义参数 alert({ content: "自定义alert弹窗", btnText: "OK", boxClass: "custom-alert" }, function () { console.log("good!"); }); Confirm confirm("这个是一个confirm弹窗", functi

仿ios的省市县3级联动脚本一

一,图片实例 二,代码 2.1,代码 $('#provinceCity_fu').click(function(){ var $this = $(this); new Picker({ "title": '请选择地区',//标题(可选) "defaultValue": $(this).text(),//默认值-多个以空格分开(可选) "type": 3,//需要联动级数[1.2.3](可选) "data": cityData,