Hi I'm using the bootstrap form helper country picker. But I need to display only set of chosen countries instead of all set. This is my code.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Form Helpers Basic Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Bootstrap Form Helpers -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/css/bootstrap-formhelpers.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="bfh-selectbox bfh-countries" data-countryList="US,AG,AU" data-flags="true">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Bootstrap Form Helpers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/js/bootstrap-formhelpers.min.js"></script>
<script src="http://js.nicdn.de/bootstrap/formhelpers/docs/assets/js/bootstrap-formhelpers-countries.js"></script>
</body>
</html>
It would be great if someone knows a way to do it. But unfortunately it gives an empty drop down.
And I understand we can do it like,
<select class="form-control bfh-countries" data-available="US,AG,AU"></select>
But this way appears to be without country flags.
To make it work you should add links to CSS and JS files of Bootstrap Form Helpers library which should be previously downloaded on your server. Bootstrap description