<!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. 快速上手系列：XML

    一 xml 简介extensible markup language :可扩展标记型语言(1)标记型语言:html 也是标记型语言,即使用标签来操作(2)可扩展: 1)html 里面的标签是固定的,每 ...

  2. verilog设计知识集合（2）

    verilog设计知识集合(2) 1.阻塞与非阻塞 阻塞赋值是存在先后关系的,非阻塞是不存在先后关系的.一般而言,阻塞用于组合逻辑,非阻塞用于时序逻辑(不一定).阻塞的执行时逐步赋值,非阻塞是同步赋值 ...

  3. 英语文档之vivado界面

    vivado英文界面 一.界面内容 图中就是vivado常用的界面. 二.常用窗口 首先是左侧的project manager:IP INTEGRATOR(IP 集成器),simulation(仿真) ...

  4. KingbaseES 分区表与 Oracle 分区表对于空值的处理差异

    一.对于null 值处理 1.Oracle 分区字段允许为空,只要存在maxvalue 分区,值就可以插入. SQL> create table t1(id number,data varcha ...

  5. 白话分解入门操作系统到 Java

    一.完成一个任务需要什么? 时间 + 资源 + 处理能力 时间就是时间. 资源就是资源. 处理能力就是能够利用时间和资源完成任务的主体. 二.关于操作系统 处理能力就是cpu. 资源就是存储. 时间就 ...

  6. 线上问题分析之java dump文件生成

    一.查看java进程 jps or ps aux | grep java 二.生成dump文件 jmap -dump:live,format=b,file=xxxx.bin 进程ID 三.查看dump ...

  7. lodash已死？radash最全使用介绍（附源码说明）—— Array方法篇（2）

    前言 前篇我们已经介绍了 radash 的相关信息和部分 Array 相关方法,详情可前往主页查看: 本篇我们继续介绍 radash 中 Array 的其他相关方法: Radash 的 Array 相 ...

  8. Python企业面试题1 —— 基础篇

    1. b.B.KB.MB.GB的关系? b ---- 位(bit) B ---- 字节(一个字节等于8位) 1 B = 8 bit 1 KB = 1024 B 1 MB = 1024 KB 1 GB ...

  9. 2023 OpenHarmony年度运营报告

  10. Windows wsl2安装Docker

    wsl2的Ubuntu安装好后,就可以安装Docker了. 由于众所周知的原因,国内访问国外的某些网站会访问不了或者访问极慢,Docker的安装网站就在其中. 所以推荐使用阿里的镜像进行安装. 1.使 ...