<!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. 开发必会系列：为什么要用spring

    Spring是于2003 年兴起的一个轻量级的Java 开发框架,开源的,由Rod Johnson 在其著作Expert One-On-One J2EE Development and Design中 ...

  2. 开发进阶系列：Java网络通信编程从基础到框架

    一  基本概念 IO(BIO)和NIO的区别:其本质就是阻塞和非阻塞的区别. 阻塞:应用程序在获取网络数据的时候,如果网络传输数据很慢,那程序就一直等着,直到传输完毕为止. 非阻塞:应用程序直接可以获 ...

  3. LOTO示波器客户应用案例展示

    LOTO示波器客户应用案例展示 LOTO示波器以软件功能为核心,采用独特的积木式可扩展的硬件架构,为多行业的电子电路研发工程师提供高性价比的解决方案.我们初步汇总了一些客户实测的应用案例展示如下: 1 ...

  4. 【已解决】IDEA项目启动时Maven报错：Downgrade Maven to version 3.8.1 or earlier in settings

    报错场景如下: Possible solutions: Check that Maven pom files not contain http repository http://mvn.gt.ige ...

  5. scala入门输出hello world!

    官网下载scala 2.12.11 版zip包,解压到自定义目录并配置环境变量.

  6. 王莉：将开发文档英文化和本地化，我们努力让OpenHarmony走向全球

    编者按:在 OpenHarmony 生态发展过程中,涌现了大批优秀的代码贡献者,本专题旨在表彰贡献.分享经验,文中内容来自嘉宾访谈,不代表 OpenHarmony 工作委员会观点. 王莉 华为技术有限 ...

  7. 多次复制Excel符合要求的数据行：Python批量实现

      本文介绍基于Python语言,读取Excel表格文件数据,并基于其中某一列数据的值,将这一数据处于指定范围的那一行加以复制,并将所得结果保存为新的Excel表格文件的方法.   首先,我们来明确一 ...

  8. HarmonyOS崩溃服务能力全新上线，帮你高效解决崩溃问题！

    原文:https://mp.weixin.qq.com/s/YmYzNXsvsqt8U8JX3vlmrg,点击链接查看更多技术内容. 一.为什么需要崩溃服务能力 用户在使用原子化服务时,出现卡顿.缓慢 ...

  9. mysql 重新整理——索引简介[七]

    前言 百度百科索引: 在关系数据库中,索引是一种单独的.物理的对数据库表中一列或多列的值进行排序的一种存储结构,它是某个表中一列或若干列值的集合和相应的指向表中物理标识这些值的数据页的逻辑指针清单. ...

  10. PIL.Image, numpy, tensor, cv2 之间的互转，以及在cv2在图片上画各种形状的线

    ''' PIL.Image, numpy, tensor, cv2 之间的互转 ''' import cv2 import torch from PIL import Image import num ...