<!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. C++ Concurrency in Action 读书笔记三：并发操作的同步

    Chapter 4 并发操作的同步·Synchronizing concurrent operations

  2. 神经网络——基于sklearn的参数介绍及应用

    一.MLPClassifier&MLPRegressor参数和方法 参数说明(分类和回归参数一致): hidden_layer_sizes :例如hidden_layer_sizes=(50, ...

  3. MybatisPlus的association 属性及案例

    <select id="getMatUnitList" resultMap="matUnitVOMap"> SELECT a.CODE, a.min ...

  4. 在使用若依分离版时遇到富文本不显示html解决

    <el-table-column label="公告内容" align="center" prop="content"> < ...

  5. N次剩余小记

    前言 上周在 51nod 交了一些3.4级的题目,然后发现没有写过1级题, 就找到了一道 51nod 1014 \(X^2 \bmod P\) 的题目,当然这题虽然是暴力,但也可以用二次剩余做. 我就 ...

  6. #贪心#CF1054D Changing Array

    题目 给定 \(n\) 个 \(k\) 位二进制数,\(n\leq 2*10^5,k\leq 30\) 可以选择若干数将其所有二进制位取反, 最多可以有多少个区间的异或和不为 0 分析 考虑将区间异或 ...

  7. Jetty使用入门

    社区当前推荐开发者使用Jetty 12.X版本. 依据End of Community Support for Jetty 9.x - June 2022,社区对Jetty 9.x的支持,已在2022 ...

  8. 【中秋国庆不断更】OpenHarmony组件内状态变量使用：@State装饰器

    [中秋国庆不断更]OpenHarmony组件内状态变量使用:@State装饰器 @State装饰的变量,或称为状态变量,一旦变量拥有了状态属性,就和自定义组件的渲染绑定起来.当状态改变时,UI会发生对 ...

  9. 浅谈OpenHarmony LiteOS-A内核之基础硬件——中断控制器GIC400

    一.前言 OpenAtom OpenHarmony(以下简称"OpenHarmony")采用多内核架构,支持Linux内核的标准系统.LiteOS-A的小型系统.LiteOS-M的 ...

  10. 【直播回顾】OpenHarmony知识赋能五期第四课——子系统音频解读

    5月12日晚上19点,知识赋能第五期第四节课<OpenHarmony标准系统多媒体子系统之音频解读>,在OpenHarmony开发者成长计划社群内成功举行. 本期课程,由深开鸿资深技术专家 ...