jQuery国际区号使用button实现下拉选择（仿知乎效果）

效果预览

1、jQuery

2、html 按钮

3、国际区号 json

1、jQuery版本

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

2、html 按钮

 <div class="box"><div class="phoneBox"><div class="phoneGroup"><button class="phone-btn selectBtn" type="button" data-type="selected"><span>中国 +86</span><svg class="Zi--Select Select-arrow" fill="currentColor" viewBox="0 0 24 24"><pathd="M12 16.183l2.716-2.966a.757.757 0 0 1 1.064.001.738.738 0 0 1 0 1.052l-3.247 3.512a.758.758 0 0 1-1.064 0L8.22 14.27a.738.738 0 0 1 0-1.052.758.758 0 0 1 1.063 0L12 16.183zm0-9.365L9.284 9.782a.758.758 0 0 1-1.064 0 .738.738 0 0 1 0-1.052l3.248-3.512a.758.758 0 0 1 1.065 0L15.78 8.73a.738.738 0 0 1 0 1.052.757.757 0 0 1-1.063.001L12 6.818z"fill-rule="evenodd"></path></svg></button></div><div class="selectConentent"><div class="selectOptions"></div></div></div></div>

    <style>.box {width: 352px;height: auto;background-color: #ffffff;margin: 60px auto;border-bottom: 1px solid #eeeeee;}.phoneBox {position: relative;display: inline-block;}.phoneGroup {display: inline-block;min-width: 72px;text-align: left;}.phone-btn {border: none;height: auto;padding: 0;line-height: inherit;background-color: transparent;border: none;border-radius: 0;display: inline-block;font-size: 14px;line-height: 32px;cursor: pointer;}.phone-btn:focus {outline: none;}.selectBtn {text-align: left;/* padding: 0 16px; */color: #8590a6;text-align: center;background: none;/* border: 1px solid; */border-radius: 3px;height: calc(100% - 42px);}.selectConentent {display: none;position: absolute;top: 0;z-index: 233;background-color: #ffffff;left: -24px;border: 1px solid #ebebeb;width: 210px;border-radius: 4px;-webkit-box-shadow: 0 5px 20px rgba(26, 26, 26, .1);box-shadow: 0 5px 20px rgba(26, 26, 26, .1);}.selectOptions {overflow: auto;position: relative;max-height: 500px;padding: 8px 0;border-radius: 4px;text-align: left;}.selectOptions::-webkit-scrollbar {width: 10px;height: 1px;background-color: #f6f6f6;}/*定义滚动条轨道 内阴影+圆角*/.selectOptions::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);border-radius: 10px;background-color: #f6f6f6;}.selectOptions::-webkit-scrollbar-thumb {background-color: #afadad;width: 5px;max-height: 10px;border-radius: 10px;}.select-option {display: block;width: 100%;height: 40px;padding: 0 20px;line-height: 40px;color: #8590a6;text-align: left;background: none;border: none;}.Select-arrow {margin-left: 8px;fill: currentcolor;width: 24px;height: 24px;display: inline-block;vertical-align: middle;}</style>

3、jQuery

    <script>$(function () {$("button.selectBtn").click(function (e) {if ($(".selectConentent").is(':hidden')) {$(".selectConentent").show();} else {$(".selectConentent").hide();}$(document).one('click', function () {$(".selectConentent").hide();});e.stopPropagation();});// 国际区号json$.ajax({type: "GET",url: "../js/selectOptions.json",data: "data",dataType: "JSON",success: function (data) {// console.log(data);$.each(data.CountryNum, function (i, item) {// console.log(item.countryName, item.number);let btns = " <button class='phone-btn selectBtn select-option' type='button' data-type='option'" + "data-id=" + i + ">" + item.countryName + "   " + item.number + "</button>";$(".selectOptions").append(btns);chooseBtn();// console.log(btns);});}});function chooseBtn() {$("button[data-type='option']").each(function () {$(this).click(function () {let txt = $(this).text();$("button[data-type='selected']").attr("data-fid", $(this).index());$("button[data-type='selected'] span").text(txt);$(".selectConentent").hide();});$(this).hover(function () {$(this).css("background-color", "#f6f6f6");}, function () {$(this).css("background-color", "#ffffff");});});};});

效果：


3、json文件
国际区号json文件

https://download.csdn.net/download/Sonnenlicht77/12355582