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