How to make my "phone" field just like Google Signup Page [closed]

Question

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 9 years ago.

i have field for "Phone Number" what i need to do is that to make it like the below image.default will be the user current location country code

when i click into it so it opens like this

Note : I do not need Country flags and it's jQuery Mobile Site. Can anyone Provide me the jsfiddle ?

Answer 1

Have you considered using a jquery skinned drop-down list with country names and simply using the selected option to add the country code to your textbox?

UPDATE: It is actually a dropdown. Consider the jQuery TimePicker plugin snippet below:

// 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);

It should help you understand how the dropdown is created via jQuery/javascript.