红叶都枫了 @163

html+jq实现全国省的单选，弹框输入input 

<!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实现省市选择

posted @ 2020-08-18 16:54  红叶都枫了163  阅读(402)  评论(0)  编辑  收藏  举报