您知道电话前缀的任何开源 JQuery 下拉菜单吗?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11204479/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 10:19:35  来源:igfitidea点击:

Do you know any opensource JQuery dropdown menu for telephone prefix?

jqueryhtmldrop-down-menuprefix

提问by Oscar Foley

I need to do a dropdown menu for entering telephone numbers. I want to do something similar as google does in his registration form. Something like this:

我需要做一个下拉菜单来输入电话号码。我想做一些类似于谷歌在他的注册表中所做的事情。像这样的东西:

enter image description here

在此处输入图片说明

Do you know any opensource dropdown menu for telephone prefix?

你知道电话前缀的任何开源下拉菜单吗?

I have looking in google and the most similar thing I have found is this menu. I can modify it to do what I want but it will take time and I think maybe someone has already did something similar.

我在谷歌上找过,我发现的最相似的东西是这个菜单。我可以修改它来做我想做的事,但这需要时间,我想也许有人已经做了类似的事情。

NOTE: The link I am sharing contains only countries and flags. I am looking for a full dropdown containing flags, country names, country names in original language, ability to add a country first ignoring alphabetical order and international phone prefixes.

注意:我分享的链接只包含国家和旗帜。我正在寻找一个完整的下拉菜单,其中包含旗帜、国家/地区名称、原始语言的国家/地区名称、首先忽略字母顺序和国际电话前缀添加国家/地区的能力。

回答by Hymanocnr

I also needed this, so I built it.

我也需要这个,所以我建造了它

Here is a live demo.

这是一个现场演示

It currently has the following features:

它目前具有以下特点:

  • In the country dropdown you can navigate by typing, or using the up/down keys
  • Selecting a country updates the dial code of the entered number
  • Typing a different dial code automatically updates the displayed flag
  • Option to specify "preferred countries" (which appear at the top of the list)
  • 在国家/地区下拉列表中,您可以通过键入或使用向上/向下键进行导航
  • 选择一个国家会更新输入号码的拨号代码
  • 输入不同的拨号代码会自动更新显示的标志
  • 指定“首选国家/地区”的选项(出现在列表顶部)

I built it out of the following open source projects:

我用以下开源项目构建了它:

回答by SexyBeast

Well, you need a database which contains all the details of the phone-numbers, then you need to query the database through Ajax, return the results via Ajax too, and display it. After getting the results, you can create a div or p element of your own, populate them with the incoming data, and display it. if you don't want to do that, use jQuery UI Autocomplete.

那么,您需要一个包含电话号码所有详细信息的数据库,然后您需要通过 Ajax 查询数据库,并通过 Ajax 返回结果,并显示它。获得结果后,您可以创建自己的 div 或 p 元素,用传入的数据填充它们,并显示它。如果您不想这样做,请使用 jQuery UI Autocomplete。

回答by hamza zaheer

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/js/intlTelInput.min.js"></script>
<script type="text/javascript">
  $("#mobile-number").intlTelInput();
</script>
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/css/intlTelInput.css">
  <title></title>
 </head>
<input type="tel" id="mobile-number" placeholder="e.g. +1 702 123 4567">

its work fine there is no probelm in code may be it will help for you thanks

它的工作正常,代码中没有问题可能会对您有所帮助,谢谢

header linkhttps://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/css/intlTelInput.cssscriptshttp://code.jquery.com/jquery-latest.min.jshttps://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/js/intlTelInput.min.js

标题链接https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/css/intlTelInput.css脚本http://code.jquery.com/jquery-latest.min.js https ://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/js/intlTelInput.min.js

java code$("#mobile-number").intlTelInput(); form code

java代码$("#mobile-number").intlTelInput(); 表格代码