<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>省单选组件jq</title>

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

</head>

<body>

    <div class="area">

        <input class="form-control" type="text" id="province" name="province" value="" onfocus="setStyle()" placeholder="请输入省份(不填默认全国投放)">

        <div id="content">

            <div id="areaList">

            </div>

            <button class="reset">取消</button>

            <button onClick='get()'>确认</button>

        </div>

    </div>

</body>

<script src="./address.js"></script>

<script>

    function getData(){

        let areasList = []

        for(item in areas){

            let citys = []

            let objs = {

                province:item,

                citys:item.indexOf("市") != -1?'':citys,

                show:false,

                IsCheckeds:false

            }

            for(i in areas[item]){

                let obj = {

                    city:areas[item][i],

                    IsChecked:false

                }

                citys.push(obj)

            }

            areasList.push(objs)

        }

        console.log(areasList)

        view(areasList)

    }

    function view(areasList){

        $(areasList).each(function(i){

            var str="<label class='radio'><input type='radio' value='"+this.province+"' name='area'>"+this.province+"<span>("+this.citys.length+")</span></label>";

            var a=$(str);

            a.appendTo($("#areaList"))

        })

    }

    function setStyle(){

        $('#content').toggleClass('display')

    }

    function get(){

        let arr = []

        $('input[name="area"]').each(function(){

            if($(this).prop('checked'))  $('#province').val($(this).val())

        })

    }

    getData()

</script>

<script>

    $(function(){

        $('#content').click(function(){

            $(this).toggleClass('display')

        })

        $('.reset').click(function(){

            $('#content').removeClass('display')

            event.stopPropagation();         //阻止按钮穿透

        })

    })

</script>

<style>

.area #content{

    position: absolute;

    left: 8px;

    top: 44px;

    width: 600px;

    border: 1px solid #ccc3c3;

    border-radius: 3px;

    padding: 10px 0;

    display: none;

    background: white;

}

#content button{

    float: right;

}

#province{

    width: 400px;

    line-height: 28px;

    text-indent: 10px;

}

.display{

    display: block!important;

}

.radio{

    font-size: 14px;

    margin:10px 15px;

    display: inline-block;

}

</style>

效果一般，帮后台写的，vue框架与tp5框架不知道 咋兼容，

下一篇：纯vue.js实现省市选择

html+jq实现全国省的单选，弹框输入input的更多相关文章

  1. 移动端ios升级到11及以上时，手机弹框输入光标出现错位问题

    引起原因:弹框的定位采取position:fixed,而ios(safari)对定位属性position:fixed的解析不一致导致. 解决方案: 方案一 一开始上网找解决方案,找到如下处理方式.但存 ...

  2. 【前端开发】--js弹框

    js三种弹框 一.普通弹框 这类弹框就是仅仅是个提示作用,并不会做其它操作 关键词:alert()    这个没啥好说的,就是一个弹框.  二.判断弹框     这类框有一个判断作用 关键字:conf ...

  3. weui 弹框中的单选效果

    <!--性别修改弹框--> <div class="weui_dialog_alert" id="doctorSexDialog" style ...

  4. Jquary入门（添加 修改 表单元素）+ JSON+弹框

    字符串拼接 计算机语言 都是 对  数据的处理(获取/修改数据)  添加元素  除了  固定的方法添加 以外 都是   字符串拼接(拼接成固定格式即可执行). 1.表单添加元素  append() 方 ...

  5. jquery mobile将页面内容当成弹框进行显示

    注:必须使用相对应版本的jquery mobile css.不然无法正常显示 <div data-role="page" id="pageone"> ...

  6. 简单实现弹出弹框页面背景半透明灰，弹框内容可滚动原页面内容不可滚动的效果(JQuery)

    弹出弹框 效果展示 实现原理 html结构比较简单,即: <div>遮罩层 <div>弹框</div> </div> 先写覆盖显示窗口的遮罩层div.b ...

  7. Android开发 ---构建对话框Builder对象，消息提示框、列表对话框、单选提示框、多选提示框、日期/时间对话框、进度条对话框、自定义对话框、投影

    效果图: 1.activity_main.xml 描述: a.定义了一个消息提示框按钮 点击按钮弹出消息 b.定义了一个选择城市的输入框 点击按钮选择城市 c.定义了一个单选提示框按钮 点击按钮选择某 ...

  8. Android TeaScreenPopupWindow多类型筛选弹框

    多类型筛选弹框.多数据筛选.多样化diy.单选or多选.必藏 (Multiple Type Screening Boxes, Multiple Data Screening, Diversified ...

  9. flask中使用ajax 处理前端请求 弹框展示

    菜小鱼初次使用 ajax,想前端提交数据,后端处理后,将结果以弹框的形式展示,在网上查看了好多,不停的调试,终于调通了 html: <html> <head></head ...

  10. UI自动化之特殊处理二（弹框\下拉框\选项\文件上传）

    弹框\下拉框\选项\文件上传也是一些比较特殊的操作 目录 1.弹框 2.下拉框 3.选项 4.文件上传 1.弹框 弹框有三种形式,value为alert.confirm.prompt三种的弹框,第一个 ...

随机推荐

  1. iptables-save 命令使用总结

    转载请注明出处: iptables-save 命令在 Linux 系统中用于将当前运行的 iptables 防火墙规则导出到一个文件中.这对于备份规则.迁移规则或在不同系统间共享规则配置非常有用. 基 ...

  2. KingbaseES 配置root.sh实现数据库服务开机自启动

    案例说明: KingbaseES数据库在部署完成后,支持数据库服务开机自启动,部署完成后,root用户(Linux)执行安装软件目录下的root.sh脚本后,可以实现数据库服务开机自启动. 适用版本: ...

  3. .NET分布式Orleans - 7 - Streaming

    概念 在Orleans中,Streaming是一组API和功能集,它提供了一种构建.发布和消费数据流的方式. 这些流可以是任何类型的数据,从简单的消息到复杂的事件或数据记录.Streaming API ...

  4. 基于 alientek rv1126 快速启动调试那的写坑

    基于 alientek rv1126 快速启动调试那的写坑 1. sdk 编制准备工作 1.1 编译配置修改 首先拿到 sdk 通过修改一下相关配置 1.1.1修改DDR 配置 cd /home/al ...

  5. 6 CSS样式继承

    6 样式继承 CSS的样式表继承指的是,特定的CSS属性向下传递到子孙元素.总的来说,一个HTML文档就是一个家族,然后html元素有两个子元素,相当于它的儿子,分别是head和body,然后body ...

  6. #树状数组、dp#JZOJ 5361 捕老鼠

    题目 农夫约的农庄里有\(N\)个仓库,排成了一排,编号为\(1-N\). 假设猫在第\(i\)个仓库点燃艾条,烟雾就会充满该仓库,并向左右扩散\(Ai\)的距离,接着所有\(|i-j|<=Ai ...

  7. 30分钟成为Contributor｜共建测试子系统，赋能提升项目代码质量

    如何优雅地参与开源贡献,向顶级开源项目提交 PR(Pull Request),跟着大咖30分钟成为OpenAtom OpenHarmony(以下简称"OpenHarmony") C ...

  8. 掌上新闻随心播控，HarmonyOS SDK助力新浪新闻打造精致易用的资讯服务新体验

    原生智能是HarmonyOS NEXT的核心亮点之一,依托HarmonyOS SDK丰富全面的开放能力,开发者只需通过几行代码,即可快速实现AI功能.新浪新闻作为鸿蒙原生应用开发的先行者之一,从有声资 ...

  9. Zookeeper+dubbo学习笔记

    举个例子 你需要打车 那么会使用滴滴软件,而滴滴软件就类似于Zookeeper,  你和汽车司机都需要在滴滴公司注册(留下联系方式方便联系), 当你需要打车时Zookeeper会帮你找到你需要的汽车司 ...

  10. The First 寒假集训の小总结

    转眼间十五天的寒假集训已经结束,也学习到了许多新知识,dp,线段树,单调栈和单调队列......,假期过得还是很有意义的,虽然我的两次考试成绩不尽人意(只能怪我自己没有好好理解知识点还有好好做题),但 ...