如何使我的“手机”字段就像Google注册页面一样

Question

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

当我点击它时，它会像

一样打开

注意：我不需要国家标志，它是jQuery Mobile Site。 任何人都可以提供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创建下拉列表。