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">
                        <path
                            d="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