javascript - 如何使我的“电话”字段就像 Google 注册页面一样

Question

我有“ Phone Number”字段我需要做的是使它像下图一样。默认将是用户当前位置国家代码

当我点击它时，它会像这样打开

注意：我不需要国家标志，它是 jQuery Mobile 站点。谁能提供我的jsfiddle？

Answer 1

您是否考虑过使用带有国家名称的 jquery 皮肤下拉列表，并简单地使用选定的选项将国家代码添加到您的文本框中？

更新：它实际上是一个下拉列表。考虑下面的 jQuery TimePicker 插件片段：

// some default cars
    var newHTML = '';
    var $t = $(this);

    // calculate the offsets
    var height = this.height() + 1;
    var width = this.outerWidth();

    // generate our html dropdown
    var timeMargins = ['00', '15', '30', '45'];
    newHTML += ' <select style="position: absolute; left:0;top:' + height + 'px; width: ' + width + 'px;" size="7">'
    for (var h = params.minHour; h <= params.maxHour; h++)
    {
        for (var i = 0; i < timeMargins.length; i++)
        {
            if (h == params.maxHour && timeMargins[i] >= params.maxMinute)
            {
                //do nothing
            }
            else
            {
                var newhour = "" + h;
                var v = (newhour.length == 1 ? '0' : '') + h + ':' + timeMargins[i];
                newHTML += '<option>' + v + '</option>';
            }
        }
    }
    newHTML += '</select>';

    var id = this.attr('id');
    var newid = id + '-container';

    // wrap the target in the div
    $t.wrap('<div id="' + newid + '" style="position: relative; display: inline;"></div>');
    $t.after(newHTML);

它应该可以帮助您了解如何通过 jQuery/javascript 创建下拉列表。