<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Smartcoder</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="css/flags.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<style>
.custombtn {
background: #007bff;
color: #fff;
height: 45px;
width: 128px;
border: 2px #007bff solid;
font-size: 16px;
text-transform: capitalize;
}
.dropdown-menu li:first-child a {
display: none;
}
<!-- .none{display:none;}
#flagstrap-drop-down-JgLC3z9w-list {
display: none !important;
}
#flagstrap-drop-down-asNMtDp4-list {
display: none !important;
}
-->
</style>
</head>
<body onload="">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6">
<form>
<div id="options" data-input-name="country2" data-selected-country="GB" class="flagstrap">
<select class="none"id="flagstrap-mk73oti6" name="country2" style="">
<option value="US">English</option>
<option value="Ar">Arabic</option>
</select>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="js/jquery.flagstrap.js"></script>
<script>
$('#basic').flagStrap();
$('#origin').flagStrap({
placeholder: {
value: "",
text: "English"
}
});
$('#options').flagStrap({
countries: {
"US": "English",
"Ar": "Arabic"
},
buttonSize: "btn-sm",
buttonType: "btn-info",
labelMargin: "10px",
scrollable: false,
scrollableHeight: "350px"
});
$('#advanced').flagStrap({
buttonSize: "btn-lg",
buttonType: "btn-primary",
labelMargin: "20px",
scrollable: false,
scrollableHeight: "350px",
onSelect: function (value, element) {
alert(value);
console.log(element);
}
});
</script>
</body>
.flagstrap {
display: inline-block;
position: relative;
width: 100%;
}
.flagstrap-icon {
display: inline-block;
width: 16px;
height: 11px;
background: url(flags.png) no-repeat
}
.flagstrap-placeholder,
.flagstrap-placeholder i {
display: none
}
.flagstrap-icon.flagstrap-ad {
background-position: -16px 0
}
.flagstrap-icon.flagstrap-ae {
background-position: -32px 0
}
.flagstrap-icon.flagstrap-af {
background-position: -48px 0
}
.flagstrap-icon.flagstrap-ag {
background-position: -64px 0
}
.flagstrap-icon.flagstrap-ai {
background-position: -80px 0
}
.flagstrap-icon.flagstrap-al {
background-position: -96px 0
}
.flagstrap-icon.flagstrap-am {
background-position: -112px 0
}
.flagstrap-icon.flagstrap-an {
background-position: -128px 0
}
.flagstrap-icon.flagstrap-ao {
background-position: -144px 0
}
.flagstrap-icon.flagstrap-ar {
background-position: -160px 0
}
.flagstrap-icon.flagstrap-as {
background-position: -176px 0
}
.flagstrap-icon.flagstrap-at {
background-position: -192px 0
}
.flagstrap-icon.flagstrap-au {
background-position: -208px 0
}
.flagstrap-icon.flagstrap-aw {
background-position: -224px 0
}
.flagstrap-icon.flagstrap-az {
background-position: -240px 0
}
.flagstrap-icon.flagstrap-ba {
background-position: 0 -11px
}
.flagstrap-icon.flagstrap-bb {
background-position: -16px -11px
}
.flagstrap-icon.flagstrap-bd {
background-position: -32px -11px
}
.flagstrap-icon.flagstrap-be {
background-position: -48px -11px
}
.flagstrap-icon.flagstrap-bf {
background-position: -64px -11px
}
.flagstrap-icon.flagstrap-bg {
background-position: -80px -11px
}
.flagstrap-icon.flagstrap-bh {
background-position: -96px -11px
}
.flagstrap-icon.flagstrap-bi {
background-position: -112px -11px
}
.flagstrap-icon.flagstrap-bj {
background-position: -128px -11px
}
.flagstrap-icon.flagstrap-bm {
background-position: -144px -11px
}
.flagstrap-icon.flagstrap-bn {
background-position: -160px -11px
}
.flagstrap-icon.flagstrap-bo {
background-position: -176px -11px
}
.flagstrap-icon.flagstrap-br {
background-position: -192px -11px
}
.flagstrap-icon.flagstrap-bs {
background-position: -208px -11px
}
.flagstrap-icon.flagstrap-bt {
background-position: -224px -11px
}
.flagstrap-icon.flagstrap-bv {
background-position: -240px -11px
}
.flagstrap-icon.flagstrap-bw {
background-position: 0 -22px
}
.flagstrap-icon.flagstrap-by {
background-position: -16px -22px
}
.flagstrap-icon.flagstrap-bz {
background-position: -32px -22px
}
.flagstrap-icon.flagstrap-ca {
background-position: -48px -22px
}
.flagstrap-icon.flagstrap-catalonia {
background-position: -64px -22px
}
.flagstrap-icon.flagstrap-cd {
background-position: -80px -22px
}
.flagstrap-icon.flagstrap-cf {
background-position: -96px -22px
}
.flagstrap-icon.flagstrap-cg {
background-position: -112px -22px
}
.flagstrap-icon.flagstrap-ch {
background-position: -128px -22px
}
.flagstrap-icon.flagstrap-ci {
background-position: -144px -22px
}
.flagstrap-icon.flagstrap-ck {
background-position: -160px -22px
}
.flagstrap-icon.flagstrap-cl {
background-position: -176px -22px
}
.flagstrap-icon.flagstrap-cm {
background-position: -192px -22px
}
.flagstrap-icon.flagstrap-cn {
background-position: -208px -22px
}
.flagstrap-icon.flagstrap-co {
background-position: -224px -22px
}
.flagstrap-icon.flagstrap-cr {
background-position: -240px -22px
}
.flagstrap-icon.flagstrap-cu {
background-position: 0 -33px
}
.flagstrap-icon.flagstrap-cv {
background-position: -16px -33px
}
.flagstrap-icon.flagstrap-cw {
background-position: -32px -33px
}
.flagstrap-icon.flagstrap-cy {
background-position: -48px -33px
}
.flagstrap-icon.flagstrap-cz {
background-position: -64px -33px
}
.flagstrap-icon.flagstrap-de {
background-position: -80px -33px
}
.flagstrap-icon.flagstrap-dj {
background-position: -96px -33px
}
.flagstrap-icon.flagstrap-dk {
background-position: -112px -33px
}
.flagstrap-icon.flagstrap-dm {
background-position: -128px -33px
}
.flagstrap-icon.flagstrap-do {
background-position: -144px -33px
}
.flagstrap-icon.flagstrap-dz {
background-position: -160px -33px
}
.flagstrap-icon.flagstrap-ec {
background-position: -176px -33px
}
.flagstrap-icon.flagstrap-ee {
background-position: -192px -33px
}
.flagstrap-icon.flagstrap-eg {
background-position: -208px -33px
}
.flagstrap-icon.flagstrap-eh {
background-position: -224px -33px
}
.flagstrap-icon.flagstrap-england {
background-position: -240px -33px
}
.flagstrap-icon.flagstrap-er {
background-position: 0 -44px
}
.flagstrap-icon.flagstrap-es {
background-position: -16px -44px
}
.flagstrap-icon.flagstrap-et {
background-position: -32px -44px
}
.flagstrap-icon.flagstrap-eu {
background-position: -48px -44px
}
.flagstrap-icon.flagstrap-fi {
background-position: -64px -44px
}
.flagstrap-icon.flagstrap-fj {
background-position: -80px -44px
}
.flagstrap-icon.flagstrap-fk {
background-position: -96px -44px
}
.flagstrap-icon.flagstrap-fm {
background-position: -112px -44px
}
.flagstrap-icon.flagstrap-fo {
background-position: -128px -44px
}
.flagstrap-icon.flagstrap-fr {
background-position: -144px -44px
}
.flagstrap-icon.flagstrap-ga {
background-position: -160px -44px
}
.flagstrap-icon.flagstrap-gb {
background-position: -176px -44px
}
.flagstrap-icon.flagstrap-gd {
background-position: -192px -44px
}
.flagstrap-icon.flagstrap-ge {
background-position: -208px -44px
}
.flagstrap-icon.flagstrap-gf {
background-position: -224px -44px
}
.flagstrap-icon.flagstrap-gg {
background-position: -240px -44px
}
.flagstrap-icon.flagstrap-gh {
background-position: 0 -55px
}
.flagstrap-icon.flagstrap-gi {
background-position: -16px -55px
}
.flagstrap-icon.flagstrap-gl {
background-position: -32px -55px
}
.flagstrap-icon.flagstrap-gm {
background-position: -48px -55px
}
.flagstrap-icon.flagstrap-gn {
background-position: -64px -55px
}
.flagstrap-icon.flagstrap-gp {
background-position: -80px -55px
}
.flagstrap-icon.flagstrap-gq {
background-position: -96px -55px
}
.flagstrap-icon.flagstrap-gr {
background-position: -112px -55px
}
.flagstrap-icon.flagstrap-gs {
background-position: -128px -55px
}
.flagstrap-icon.flagstrap-gt {
background-position: -144px -55px
}
.flagstrap-icon.flagstrap-gu {
background-position: -160px -55px
}
.flagstrap-icon.flagstrap-gw {
background-position: -176px -55px
}
.flagstrap-icon.flagstrap-gy {
background-position: -192px -55px
}
.flagstrap-icon.flagstrap-hk {
background-position: -208px -55px
}
.flagstrap-icon.flagstrap-hm {
background-position: -224px -55px
}
.flagstrap-icon.flagstrap-hn {
background-position: -240px -55px
}
.flagstrap-icon.flagstrap-hr {
background-position: 0 -66px
}
.flagstrap-icon.flagstrap-ht {
background-position: -16px -66px
}
.flagstrap-icon.flagstrap-hu {
background-position: -32px -66px
}
.flagstrap-icon.flagstrap-ic {
background-position: -48px -66px
}
.flagstrap-icon.flagstrap-id {
background-position: -64px -66px
}
.flagstrap-icon.flagstrap-ie {
background-position: -80px -66px
}
.flagstrap-icon.flagstrap-il {
background-position: -96px -66px
}
.flagstrap-icon.flagstrap-im {
background-position: -112px -66px
}
.flagstrap-icon.flagstrap-in {
background-position: -128px -66px
}
.flagstrap-icon.flagstrap-io {
background-position: -144px -66px
}
.flagstrap-icon.flagstrap-iq {
background-position: -160px -66px
}
.flagstrap-icon.flagstrap-ir {
background-position: -176px -66px
}
.flagstrap-icon.flagstrap-is {
background-position: -192px -66px
}
.flagstrap-icon.flagstrap-it {
background-position: -208px -66px
}
.flagstrap-icon.flagstrap-je {
background-position: -224px -66px
}
.flagstrap-icon.flagstrap-jm {
background-position: -240px -66px
}
.flagstrap-icon.flagstrap-jo {
background-position: 0 -77px
}
.flagstrap-icon.flagstrap-jp {
background-position: -16px -77px
}
.flagstrap-icon.flagstrap-ke {
background-position: -32px -77px
}
.flagstrap-icon.flagstrap-kg {
background-position: -48px -77px
}
.flagstrap-icon.flagstrap-kh {
background-position: -64px -77px
}
.flagstrap-icon.flagstrap-ki {
background-position: -80px -77px
}
.flagstrap-icon.flagstrap-km {
background-position: -96px -77px
}
.flagstrap-icon.flagstrap-kn {
background-position: -112px -77px
}
.flagstrap-icon.flagstrap-kp {
background-position: -128px -77px
}
.flagstrap-icon.flagstrap-kr {
background-position: -144px -77px
}
.flagstrap-icon.flagstrap-kurdistan {
background-position: -160px -77px
}
.flagstrap-icon.flagstrap-kw {
background-position: -176px -77px
}
.flagstrap-icon.flagstrap-ky {
background-position: -192px -77px
}
.flagstrap-icon.flagstrap-kz {
background-position: -208px -77px
}
.flagstrap-icon.flagstrap-la {
background-position: -224px -77px
}
.flagstrap-icon.flagstrap-lb {
background-position: -240px -77px
}
.flagstrap-icon.flagstrap-lc {
background-position: 0 -88px
}
.flagstrap-icon.flagstrap-li {
background-position: -16px -88px
}
.flagstrap-icon.flagstrap-lk {
background-position: -32px -88px
}
.flagstrap-icon.flagstrap-lr {
background-position: -48px -88px
}
.flagstrap-icon.flagstrap-ls {
background-position: -64px -88px
}
.flagstrap-icon.flagstrap-lt {
background-position: -80px -88px
}
.flagstrap-icon.flagstrap-lu {
background-position: -96px -88px
}
.flagstrap-icon.flagstrap-lv {
background-position: -112px -88px
}
.flagstrap-icon.flagstrap-ly {
background-position: -128px -88px
}
.flagstrap-icon.flagstrap-ma {
background-position: -144px -88px
}
.flagstrap-icon.flagstrap-mc {
background-position: -160px -88px
}
.flagstrap-icon.flagstrap-md {
background-position: -176px -88px
}
.flagstrap-icon.flagstrap-me {
background-position: -192px -88px
}
.flagstrap-icon.flagstrap-mg {
background-position: -208px -88px
}
.flagstrap-icon.flagstrap-mh {
background-position: -224px -88px
}
.flagstrap-icon.flagstrap-mk {
background-position: -240px -88px
}
.flagstrap-icon.flagstrap-ml {
background-position: 0 -99px
}
.flagstrap-icon.flagstrap-mm {
background-position: -16px -99px
}
.flagstrap-icon.flagstrap-mn {
background-position: -32px -99px
}
.flagstrap-icon.flagstrap-mo {
background-position: -48px -99px
}
.flagstrap-icon.flagstrap-mp {
background-position: -64px -99px
}
.flagstrap-icon.flagstrap-mq {
background-position: -80px -99px
}
.flagstrap-icon.flagstrap-mr {
background-position: -96px -99px
}
.flagstrap-icon.flagstrap-ms {
background-position: -112px -99px
}
.flagstrap-icon.flagstrap-mt {
background-position: -128px -99px
}
.flagstrap-icon.flagstrap-mu {
background-position: -144px -99px
}
.flagstrap-icon.flagstrap-mv {
background-position: -160px -99px
}
.flagstrap-icon.flagstrap-mw {
background-position: -176px -99px
}
.flagstrap-icon.flagstrap-mx {
background-position: -192px -99px
}
.flagstrap-icon.flagstrap-my {
background-position: -208px -99px
}
.flagstrap-icon.flagstrap-mz {
background-position: -224px -99px
}
.flagstrap-icon.flagstrap-na {
background-position: -240px -99px
}
.flagstrap-icon.flagstrap-nc {
background-position: 0 -110px
}
.flagstrap-icon.flagstrap-ne {
background-position: -16px -110px
}
.flagstrap-icon.flagstrap-nf {
background-position: -32px -110px
}
.flagstrap-icon.flagstrap-ng {
background-position: -48px -110px
}
.flagstrap-icon.flagstrap-ni {
background-position: -64px -110px
}
.flagstrap-icon.flagstrap-nl {
background-position: -80px -110px
}
.flagstrap-icon.flagstrap-no {
background-position: -96px -110px
}
.flagstrap-icon.flagstrap-np {
background-position: -112px -110px
}
.flagstrap-icon.flagstrap-nr {
background-position: -128px -110px
}
.flagstrap-icon.flagstrap-nu {
background-position: -144px -110px
}
.flagstrap-icon.flagstrap-nz {
background-position: -160px -110px
}
.flagstrap-icon.flagstrap-om {
background-position: -176px -110px
}
.flagstrap-icon.flagstrap-pa {
background-position: -192px -110px
}
.flagstrap-icon.flagstrap-pe {
background-position: -208px -110px
}
.flagstrap-icon.flagstrap-pf {
background-position: -224px -110px
}
.flagstrap-icon.flagstrap-pg {
background-position: -240px -110px
}
.flagstrap-icon.flagstrap-ph {
background-position: 0 -121px
}
.flagstrap-icon.flagstrap-pk {
background-position: -16px -121px
}
.flagstrap-icon.flagstrap-pl {
background-position: -32px -121px
}
.flagstrap-icon.flagstrap-pm {
background-position: -48px -121px
}
.flagstrap-icon.flagstrap-pn {
background-position: -64px -121px
}
.flagstrap-icon.flagstrap-pr {
background-position: -80px -121px
}
.flagstrap-icon.flagstrap-ps {
background-position: -96px -121px
}
.flagstrap-icon.flagstrap-pt {
background-position: -112px -121px
}
.flagstrap-icon.flagstrap-pw {
background-position: -128px -121px
}
.flagstrap-icon.flagstrap-py {
background-position: -144px -121px
}
.flagstrap-icon.flagstrap-qa {
background-position: -160px -121px
}
.flagstrap-icon.flagstrap-re {
background-position: -176px -121px
}
.flagstrap-icon.flagstrap-ro {
background-position: -192px -121px
}
.flagstrap-icon.flagstrap-rs {
background-position: -208px -121px
}
.flagstrap-icon.flagstrap-ru {
background-position: -224px -121px
}
.flagstrap-icon.flagstrap-rw {
background-position: -240px -121px
}
.flagstrap-icon.flagstrap-sa {
background-position: 0 -132px
}
.flagstrap-icon.flagstrap-sb {
background-position: -16px -132px
}
.flagstrap-icon.flagstrap-sc {
background-position: -32px -132px
}
.flagstrap-icon.flagstrap-scotland {
background-position: -48px -132px
}
.flagstrap-icon.flagstrap-sd {
background-position: -64px -132px
}
.flagstrap-icon.flagstrap-se {
background-position: -80px -132px
}
.flagstrap-icon.flagstrap-sg {
background-position: -96px -132px
}
.flagstrap-icon.flagstrap-sh {
background-position: -112px -132px
}
.flagstrap-icon.flagstrap-si {
background-position: -128px -132px
}
.flagstrap-icon.flagstrap-sk {
background-position: -144px -132px
}
.flagstrap-icon.flagstrap-sl {
background-position: -160px -132px
}
.flagstrap-icon.flagstrap-sm {
background-position: -176px -132px
}
.flagstrap-icon.flagstrap-sn {
background-position: -192px -132px
}
.flagstrap-icon.flagstrap-so {
background-position: -208px -132px
}
.flagstrap-icon.flagstrap-somaliland {
background-position: -224px -132px
}
.flagstrap-icon.flagstrap-sr {
background-position: -240px -132px
}
.flagstrap-icon.flagstrap-ss {
background-position: 0 -143px
}
.flagstrap-icon.flagstrap-st {
background-position: -16px -143px
}
.flagstrap-icon.flagstrap-sv {
background-position: -32px -143px
}
.flagstrap-icon.flagstrap-sx {
background-position: -48px -143px
}
.flagstrap-icon.flagstrap-sy {
background-position: -64px -143px
}
.flagstrap-icon.flagstrap-sz {
background-position: -80px -143px
}
.flagstrap-icon.flagstrap-tc {
background-position: -96px -143px
}
.flagstrap-icon.flagstrap-td {
background-position: -112px -143px
}
.flagstrap-icon.flagstrap-tf {
background-position: -128px -143px
}
.flagstrap-icon.flagstrap-tg {
background-position: -144px -143px
}
.flagstrap-icon.flagstrap-th {
background-position: -160px -143px
}
.flagstrap-icon.flagstrap-tj {
background-position: -176px -143px
}
.flagstrap-icon.flagstrap-tk {
background-position: -192px -143px
}
.flagstrap-icon.flagstrap-tl {
background-position: -208px -143px
}
.flagstrap-icon.flagstrap-tm {
background-position: -224px -143px
}
.flagstrap-icon.flagstrap-tn {
background-position: -240px -143px
}
.flagstrap-icon.flagstrap-to {
background-position: 0 -154px
}
.flagstrap-icon.flagstrap-tr {
background-position: -16px -154px
}
.flagstrap-icon.flagstrap-tt {
background-position: -32px -154px
}
.flagstrap-icon.flagstrap-tv {
background-position: -48px -154px
}
.flagstrap-icon.flagstrap-tw {
background-position: -64px -154px
}
.flagstrap-icon.flagstrap-tz {
background-position: -80px -154px
}
.flagstrap-icon.flagstrap-ua {
background-position: -96px -154px
}
.flagstrap-icon.flagstrap-ug {
background-position: -112px -154px
}
.flagstrap-icon.flagstrap-um {
background-position: -128px -154px
}
.flagstrap-icon.flagstrap-us {
background-position: -144px -154px
}
.flagstrap-icon.flagstrap-uy {
background-position: -160px -154px
}
.flagstrap-icon.flagstrap-uz {
background-position: -176px -154px
}
.flagstrap-icon.flagstrap-va {
background-position: -192px -154px
}
.flagstrap-icon.flagstrap-vc {
background-position: -208px -154px
}
.flagstrap-icon.flagstrap-ve {
background-position: -224px -154px
}
.flagstrap-icon.flagstrap-vg {
background-position: -240px -154px
}
.flagstrap-icon.flagstrap-vi {
background-position: 0 -165px
}
.flagstrap-icon.flagstrap-vn {
background-position: -16px -165px
}
.flagstrap-icon.flagstrap-vu {
background-position: -32px -165px
}
.flagstrap-icon.flagstrap-wales {
background-position: -48px -165px
}
.flagstrap-icon.flagstrap-wf {
background-position: -64px -165px
}
.flagstrap-icon.flagstrap-ws {
background-position: -80px -165px
}
.flagstrap-icon.flagstrap-ye {
background-position: -96px -165px
}
.flagstrap-icon.flagstrap-yt {
background-position: -112px -165px
}
.flagstrap-icon.flagstrap-za {
background-position: -128px -165px
}
.flagstrap-icon.flagstrap-zanzibar {
background-position: -144px -165px
}
.flagstrap-icon.flagstrap-zm {
background-position: -160px -165px
}
.flagstrap-icon.flagstrap-zw {
background-position: -176px -165px
}
/*
* FlagStrap - v1.0
* A lightwieght jQuery plugin for creating Bootstrap 3 compatible country select boxes with flags.
* http://www.blazeworx.com/flagstrap
*
* Made by Alex Carter
* Under MIT License
*/
(function ($) {
var defaults = {
buttonSize: "btn-md",
buttonType: "btn-default",
labelMargin: "10px",
scrollable: true,
scrollableHeight: "250px",
placeholder: {
value: 'English',
text:'English'
}
};
var countries = {
"AF": "Afghanistan",
"AL": "Albania",
"DZ": "Algeria",
"AS": "American Samoa",
"AD": "Andorra",
"AO": "Angola",
"AI": "Anguilla",
"AG": "Antigua and Barbuda",
"AR": "Argentina",
"AM": "Armenia",
"AW": "Aruba",
"AU": "Australia",
"AT": "Austria",
"AZ": "Azerbaijan",
"BS": "Bahamas",
"BH": "Bahrain",
"BD": "Bangladesh",
"BB": "Barbados",
"BY": "Belarus",
"BE": "Belgium",
"BZ": "Belize",
"BJ": "Benin",
"BM": "Bermuda",
"BT": "Bhutan",
"BO": "Bolivia, Plurinational State of",
"BA": "Bosnia and Herzegovina",
"BW": "Botswana",
"BV": "Bouvet Island",
"BR": "Brazil",
"IO": "British Indian Ocean Territory",
"BN": "Brunei Darussalam",
"BG": "Bulgaria",
"BF": "Burkina Faso",
"BI": "Burundi",
"KH": "Cambodia",
"CM": "Cameroon",
"CA": "Canada",
"CV": "Cape Verde",
"KY": "Cayman Islands",
"CF": "Central African Republic",
"TD": "Chad",
"CL": "Chile",
"CN": "China",
"CO": "Colombia",
"KM": "Comoros",
"CG": "Congo",
"CD": "Congo, the Democratic Republic of the",
"CK": "Cook Islands",
"CR": "Costa Rica",
"CI": "C" + "ô" + "te d'Ivoire",
"HR": "Croatia",
"CU": "Cuba",
"CW": "Cura" + "ç" + "ao",
"CY": "Cyprus",
"CZ": "Czech Republic",
"DK": "Denmark",
"DJ": "Djibouti",
"DM": "Dominica",
"DO": "Dominican Republic",
"EC": "Ecuador",
"EG": "Egypt",
"SV": "El Salvador",
"GQ": "Equatorial Guinea",
"ER": "Eritrea",
"EE": "Estonia",
"ET": "Ethiopia",
"FK": "Falkland Islands (Malvinas)",
"FO": "Faroe Islands",
"FJ": "Fiji",
"FI": "Finland",
"FR": "France",
"GF": "French Guiana",
"PF": "French Polynesia",
"TF": "French Southern Territories",
"GA": "Gabon",
"GM": "Gambia",
"GE": "Georgia",
"DE": "Germany",
"GH": "Ghana",
"GI": "Gibraltar",
"GR": "Greece",
"GL": "Greenland",
"GD": "Grenada",
"GP": "Guadeloupe",
"GU": "Guam",
"GT": "Guatemala",
"GG": "Guernsey",
"GN": "Guinea",
"GW": "Guinea-Bissau",
"GY": "Guyana",
"HT": "Haiti",
"HM": "Heard Island and McDonald Islands",
"VA": "Holy See (Vatican City State)",
"HN": "Honduras",
"HK": "Hong Kong",
"HU": "Hungary",
"IS": "Iceland",
"IN": "India",
"ID": "Indonesia",
"IR": "Iran, Islamic Republic of",
"IQ": "Iraq",
"IE": "Ireland",
"IM": "Isle of Man",
"IL": "Israel",
"IT": "Italy",
"JM": "Jamaica",
"JP": "Japan",
"JE": "Jersey",
"JO": "Jordan",
"KZ": "Kazakhstan",
"KE": "Kenya",
"KI": "Kiribati",
"KP": "Korea, Democratic People's Republic of",
"KR": "Korea, Republic of",
"KW": "Kuwait",
"KG": "Kyrgyzstan",
"LA": "Lao People's Democratic Republic",
"LV": "Latvia",
"LB": "Lebanon",
"LS": "Lesotho",
"LR": "Liberia",
"LY": "Libya",
"LI": "Liechtenstein",
"LT": "Lithuania",
"LU": "Luxembourg",
"MO": "Macao",
"MK": "Macedonia, the former Yugoslav Republic of",
"MG": "Madagascar",
"MW": "Malawi",
"MY": "Malaysia",
"MV": "Maldives",
"ML": "Mali",
"MT": "Malta",
"MH": "Marshall Islands",
"MQ": "Martinique",
"MR": "Mauritania",
"MU": "Mauritius",
"YT": "Mayotte",
"MX": "Mexico",
"FM": "Micronesia, Federated States of",
"MD": "Moldova, Republic of",
"MC": "Monaco",
"MN": "Mongolia",
"ME": "Montenegro",
"MS": "Montserrat",
"MA": "Morocco",
"MZ": "Mozambique",
"MM": "Myanmar",
"NA": "Namibia",
"NR": "Nauru",
"NP": "Nepal",
"NL": "Netherlands",
"NC": "New Caledonia",
"NZ": "New Zealand",
"NI": "Nicaragua",
"NE": "Niger",
"NG": "Nigeria",
"NU": "Niue",
"NF": "Norfolk Island",
"MP": "Northern Mariana Islands",
"NO": "Norway",
"OM": "Oman",
"PK": "Pakistan",
"PW": "Palau",
"PS": "Palestinian Territory, Occupied",
"PA": "Panama",
"PG": "Papua New Guinea",
"PY": "Paraguay",
"PE": "Peru",
"PH": "Philippines",
"PN": "Pitcairn",
"PL": "Poland",
"PT": "Portugal",
"PR": "Puerto Rico",
"QA": "Qatar",
"RE": "R" + "é" + "union",
"RO": "Romania",
"RU": "Russian Federation",
"RW": "Rwanda",
"SH": "Saint Helena, Ascension and Tristan da Cunha",
"KN": "Saint Kitts and Nevis",
"LC": "Saint Lucia",
"MF": "Saint Martin (French part)",
"PM": "Saint Pierre and Miquelon",
"VC": "Saint Vincent and the Grenadines",
"WS": "Samoa",
"SM": "San Marino",
"ST": "Sao Tome and Principe",
"SA": "Saudi Arabia",
"SN": "Senegal",
"RS": "Serbia",
"SC": "Seychelles",
"SL": "Sierra Leone",
"SG": "Singapore",
"SX": "Sint Maarten (Dutch part)",
"SK": "Slovakia",
"SI": "Slovenia",
"SB": "Solomon Islands",
"SO": "Somalia",
"ZA": "South Africa",
"GS": "South Georgia and the South Sandwich Islands",
"SS": "South Sudan",
"ES": "Spain",
"LK": "Sri Lanka",
"SD": "Sudan",
"SR": "Suriname",
"SZ": "Swaziland",
"SE": "Sweden",
"CH": "Switzerland",
"SY": "Syrian Arab Republic",
"TW": "Taiwan, Province of China",
"TJ": "Tajikistan",
"TZ": "Tanzania, United Republic of",
"TH": "Thailand",
"TL": "Timor-Leste",
"TG": "Togo",
"TK": "Tokelau",
"TO": "Tonga",
"TT": "Trinidad and Tobago",
"TN": "Tunisia",
"TR": "Turkey",
"TM": "Turkmenistan",
"TC": "Turks and Caicos Islands",
"TV": "Tuvalu",
"UG": "Uganda",
"UA": "Ukraine",
"AE": "United Arab Emirates",
"GB": "United Kingdom",
"US": "United States",
"UM": "United States Minor Outlying Islands",
"UY": "Uruguay",
"UZ": "Uzbekistan",
"VU": "Vanuatu",
"VE": "Venezuela, Bolivarian Republic of",
"VN": "Viet Nam",
"VG": "Virgin Islands, British",
"VI": "Virgin Islands, U.S.",
"WF": "Wallis and Futuna",
"EH": "Western Sahara",
"YE": "Yemen",
"ZM": "Zambia",
"ZW": "Zimbabwe"
};
$.flagStrap = function (element, options, i) {
var plugin = this;
var uniqueId = generateId(8);
plugin.countries = {};
plugin.selected = {value: null, text: null};
plugin.settings = {inputName: 'country-' + uniqueId};
var $container = $(element);
var htmlSelectId = 'flagstrap-' + uniqueId;
var htmlSelect = '#' + htmlSelectId;
plugin.init = function () {
// Merge in global settings then merge in individual settings via data attributes
plugin.countries = countries;
// Initialize Settings, priority: defaults, init options, data attributes
plugin.countries = countries;
plugin.settings = $.extend({}, defaults, options, $container.data());
if (undefined !== plugin.settings.countries) {
plugin.countries = plugin.settings.countries;
}
if (undefined !== plugin.settings.inputId) {
htmlSelectId = plugin.settings.inputId;
htmlSelect = '#' + htmlSelectId;
}
// Build HTML Select, Construct the drop down button, Assemble the drop down list items element and insert
$container
.addClass('flagstrap')
.append(buildHtmlSelect)
.append(buildDropDownButton)
.append(buildDropDownButtonItemList);
// Check to see if the onSelect callback method is assigned / callable, bind the change event for broadcast
if (plugin.settings.onSelect !== undefined && plugin.settings.onSelect instanceof Function) {
$(htmlSelect).change(function (event) {
var element = this;
options.onSelect($(element).val(), element);
});
}
// Hide the actual HTML select
$(htmlSelect).hide();
};
var buildHtmlSelect = function () {
var htmlSelectElement = $('<select/>').attr('id', htmlSelectId).attr('name', plugin.settings.inputName);
$.each(plugin.countries, function (code, country) {
var optionAttributes = {value: code};
if (plugin.settings.selectedCountry !== undefined) {
if (plugin.settings.selectedCountry === code) {
optionAttributes = {value: code, selected: "selected"};
plugin.selected = {value: code, text: country}
}
}
htmlSelectElement.append($('<option>', optionAttributes).text(country));
});
if (plugin.settings.placeholder !== false) {
htmlSelectElement.prepend($('<option>', {
value: plugin.settings.placeholder.value,
text: plugin.settings.placeholder.text
}));
}
return htmlSelectElement;
};
var buildDropDownButton = function () {
var selectedText = $(htmlSelect).find('option').first().text();
var selectedValue = $(htmlSelect).find('option').first().val();
selectedText = plugin.selected.text || selectedText;
selectedValue = plugin.selected.value || selectedValue;
if (selectedValue !== plugin.settings.placeholder.value) {
var $selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-' + selectedValue.toLowerCase()).css('margin-right', plugin.settings.labelMargin);
} else {
var $selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-placeholder');
}
var buttonLabel = $('<span/>')
.addClass('flagstrap-selected-' + uniqueId)
.html($selectedLabel)
.append(selectedText);
var button = $('<button/>')
.attr('type', 'button')
.attr('data-toggle', 'dropdown')
.attr('id', 'flagstrap-drop-down-' + uniqueId)
.addClass('custombtn ' + plugin.settings.buttonType + ' ' + plugin.settings.buttonSize + ' dropdown-toggle')
.html(buttonLabel);
$('<span/>')
.addClass('caret')
.css('margin-left', plugin.settings.labelMargin)
.insertAfter(buttonLabel);
return button;
};
var buildDropDownButtonItemList = function () {
var items = $('<ul/>')
.attr('id', 'flagstrap-drop-down-' + uniqueId + '-list')
.attr('aria-labelled-by', 'flagstrap-drop-down-' + uniqueId)
.addClass('dropdown-menu');
if (plugin.settings.scrollable) {
items.css('height', 'auto')
.css('max-height', plugin.settings.scrollableHeight)
.css('overflow-x', 'hidden');
}
// Populate the bootstrap dropdown item list
$(htmlSelect).find('option').each(function () {
/* $(".dropdown-menu").addClass("showoption"); */
// Get original select option values and labels
var text = $(this).text();
var value = $(this).val();
// Build the flag icon
if (value !== plugin.settings.placeholder.value) {
var flagIcon = $('<i/>').addClass('flagstrap-icon flagstrap-' + value.toLowerCase()).css('margin-right', plugin.settings.labelMargin);
} else {
var flagIcon = null;
}
// Build a clickable drop down option item, insert the flag and label, attach click event
var flagStrapItem = $('<a/>')
.attr('data-val', $(this).val())
.html(flagIcon)
.append(text)
.on('click', function (e) {
$(htmlSelect).val($(this).data('val'));
$(htmlSelect).trigger('change');
$('.flagstrap-selected-' + uniqueId).html($(this).html());
/* $(".dropdown-menu").removeClass("showoption"); */
e.preventDefault();
});
// Make it a list item
var listItem = $('<li/>').prepend(flagStrapItem);
// Append it to the drop down item list
items.append(listItem);
});
return items;
};
function generateId(length) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
if (!length) {
length = Math.floor(Math.random() * chars.length);
}
var str = '';
for (var i = 0; i < length; i++) {
str += chars[Math.floor(Math.random() * chars.length)];
}
return str;
}
plugin.init();
};
$.fn.flagStrap = function (options) {
return this.each(function (i) {
if ($(this).data('flagStrap') === undefined) {
$(this).data('flagStrap', new $.flagStrap(this, options, i));
}
});
}
})(jQuery);
