Bootstrap Dropdown Country Call Code Phone

by alfannas

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <h1>Bootstrap drop down with country codes</h1>
  <p>&nbsp;</p>
  <div class="dropdown" id="country-codes">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
      <span class="value">Select a Country</span>
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#" value="+47">Norway (+47)</a></li>
      <li><a href="#" value="+46">Sweeden (+46)</a></li>
      <li><a href="#" value="+79">Danmark (+79)</a></li>
      <li><a href="#" value="+47">Norway (+47)</a></li>
      <li><a href="#" value="+46">Sweeden (+46)</a></li>
      <li><a href="#" value="+79">Danmark (+79)</a></li>
      <li><a href="#" value="+47">Norway (+47)</a></li>
      <li><a href="#" value="+46">Sweeden (+46)</a></li>
      <li><a href="#" value="+79">Danmark (+79)</a></li>
      <li><a href="#" value="+47">Norway (+47)</a></li>
      <li><a href="#" value="+46">Sweeden (+46)</a></li>
      <li><a href="#" value="+79">Danmark (+79)</a></li>
      <li><a href="#" value="+47">Norway (+47)</a></li>
      <li><a href="#" value="+46">Sweeden (+46)</a></li>
      <li><a href="#" value="+79">Danmark (+79)</a></li>
      <li><a href="#" value="+47">Norway (+47)</a></li>
      <li><a href="#" value="+46">Sweeden (+46)</a></li>
      <li><a href="#" value="+79">Danmark (+79)</a></li>
      <li><a href="#" value="+47">Norway (+47)</a></li>
      <li><a href="#" value="+46">Sweeden (+46)</a></li>
      <li><a href="#" value="+79">Danmark (+79)</a></li>
      <li><a href="#" value="+47">Norway (+47)</a></li>
      <li><a href="#" value="+46">Sweeden (+46)</a></li>
      <li><a href="#" value="+79">Danmark (+79)</a></li>
  ...

CSS

ul.dropdown-menu{
  height:300px;
  overflow-y:scroll;
}

JavaScript

//https://www.bootply.com/LA8w494yQq#

$('#country-codes li a').on('click', function() {
	$('#country-codes button span.value').text($(this).attr('value'));
});