<!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. GPT-SoVITS教程,接入酒馆AI,SillyTavern-1.11.5,让AI女友声若幽兰

    本次分享一下如何将GPT-SoVITS接入SillyTavern-1.11.5项目,让让AI女友声若幽兰,首先明确一下,SillyTavern-1.11.5只是一个前端项目,它没有任何大模型文本生成能 ...

  2. JVM—运行时数据区

    JVM-运行时数据区 运行时数据区概述 JVM运行时数据区如下图: 整个JVM构成里面,主要由三部分组成:类加载系统.运行时数据区.执行引擎. 按照线程使用情况和职责分成两大类: 线程独享(程序执行区 ...

  3. 许北林：我为什么加入OpenHarmony生态？又为什么要做“启航KP”开发套件？

    许北林 软通动力 资深项目经理 在全球开源趋势下,中国正逐渐成为全球开源软件的主要使用者和核心贡献者.今天我们来认识一位接触 OpenHarmony 不到一年,便带领团队成功开发出一款"启航 ...

  4. Hi3861 通过UART串口协议与其它开发板进行通信

    一.搭建编译环境 1.下载虚拟机VMware和Ubuntu20.0.14 下载 VMware Workstation Pro | CN https://www.vmware.com/cn/produc ...

  5. C# 数据类型与类型转换：包含教程与示例

    C# 数据类型 C# 中的变量必须是指定的数据类型: int myNum = 5; // 整数(整数) double myDoubleNum = 5.99D; // 浮点数 char myLetter ...

  6. Linux 操作另一台服务器

    服务器信任 在运维场景中,如果需要在一台服务器操作另一台服务器,就需要目标服务器(下面称为 B 服务器)信任当前服务器(下面称为 A 服务器). 在 A 服务器生成证书. ssh-keygen -t ...

  7. 开发指导—利用CSS动画实现HarmonyOS动效（一）

     注:本文内容分享转载自HarmonyOS Developer官网文档 一. CSS语法参考 CSS是描述HML页面结构的样式语言.所有组件均存在系统默认样式,也可在页面CSS样式文件中对组件.页面自 ...

  8. 记录协助Javaer硬件快速开发过程之Web技术栈对接施耐德网络IO网关

    前一段时间有个Java技术栈的朋友联系到我,需要快速对接现有的无人值守称重系统,这里的对接是指替代现有系统,而非软件层面的对接,也就是利用现有的硬件开发一套替代现有软件的自动化系统.主要设备包括地磅秤 ...

  9. Har 版本包发布

    新建 Module 注意名字最好是小写命名 oh-package.json5 修改 description 描述信息 在 Index.ets 导出对外暴露的组件 export{ TitleBar } ...

  10. Java使用ganymed工具包执行LINUX命令教程

    了解更多开发技巧,请访问,架构师小跟班官网:https://www.jiagou1216.compackage com.jiagou;import ch.ethz.ssh2.Connection;im ...