user3307783 user3307783 - 5 months ago 184
CSS Question

Icon flags with value in dropdown menu

I have bootstrap dropdown menu with options to select. I want to add country flag near text on left side. And I did it, but the problem is when i select the option in dropdown and submit it, the flag is sent via php/html too. I dont know how to place it here to do not submit the flag with

<li>
and to have flag on the left side.

HTML:

<a class="btn btn-primary btn-select">
<span class="btn-select-arrow glyphicon glyphicon-chevron-down"></span>
<input class="btn-select-input" id="select_league" name="league" type="hidden">
<span class="btn-select-value">All leagues</span>
<ul style="display: none;">
<li class=""><span class="flag-icon flag-icon-br"></span>Brazil</li>
<li class=""><span class="flag-icon flag-icon-br"></span>Brazil</li>
<li class=""><span class="flag-icon flag-icon-br"></span>Brazil</li>
<li class=""><span class="flag-icon flag-icon-br"></span>Brazil</li>
<li class=""><span class="flag-icon flag-icon-br"></span>Brazil</li>
<li class=""><span class="flag-icon flag-icon-br"></span>Brazil</li>
<li class=""><span class="flag-icon flag-icon-br"></span>Brazil</li>
<li class=""><span class="flag-icon flag-icon-br"></span>Brazil</li>
<li class=""><span class="flag-icon flag-icon-br"></span>Brazil</li>
</ul>
</a>

Answer

Select Drop-downs with FontAwesome & Font Flag Icons

FontAwesome Demo

   $( document.body ).on( 'click', '.dropdown-menu li', function( event ) {

      var $target = $( event.currentTarget );

      $target.closest( '.btn-group' )
         .find( '[data-bind="label"]' ).text( $target.text() )
            .end()
         .children( '.dropdown-toggle' ).dropdown( 'toggle' );

      return false;

   });
.btn-input {
   display: block;
}

.btn-input .btn.form-control {
    text-align: left;
}

.btn-input .btn.form-control span:first-child {
   left: 10px;
   overflow: hidden;
   position: absolute;
   right: 25px;
}

.btn-input .btn.form-control .caret {
   margin-top: -1px;
   position: absolute;
   right: 10px;
   top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css" rel="stylesheet"/>

<div class="container">
	<div class="row">
	  <div class="col-sm-3">
		 <h5>Select Dropdown with FontAwesome Icons</h5>

		 <div class="panel panel-default">
			<div class="panel-body">
			   <div class="btn-group">
				 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
				   <span data-bind="label">All Leagues</span>&nbsp;<span class="caret"></span>
				 </button>
				 <ul class="dropdown-menu" role="menu">
				   <li><a href="#"><i class="fa fa-flag fa-fw"></i>Brazil</a></li>
				   <li><a href="#"><i class="fa fa-flag fa-fw"></i>Brazil</a></li>
				   <li><a href="#"><i class="fa fa-flag fa-fw"></i>Brazil</a></li>
				 </ul>
			   </div>
			 </div>
		  </div>

	  </div>
	</div>  
</div>

Font Flag Icons Demo

$( document.body ).on( 'click', '.dropdown-menu li', function( event ) {

      var $target = $( event.currentTarget );

      $target.closest( '.btn-group' )
         .find( '[data-bind="label"]' ).text( $target.text() )
            .end()
         .children( '.dropdown-toggle' ).dropdown( 'toggle' );

      return false;

   });
/* CSS used here will be applied after bootstrap.css */.btn-input {
   display: block;
}

.btn-input .btn.form-control {
    text-align: left;
}

.btn-input .btn.form-control span:first-child {
   left: 10px;
   overflow: hidden;
   position: absolute;
   right: 25px;
}

.btn-input .btn.form-control .caret {
   margin-top: -1px;
   position: absolute;
   right: 10px;
   top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css" rel="stylesheet"/>

<div class="container">
	<div class="row">
	  <div class="col-sm-6">
		 <h5>Font Flag Icons</h5>

		 <div class="panel panel-default">
			<div class="panel-body">
			   <div class="btn-group">
				 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
				   <span data-bind="label">All Leagues</span>&nbsp;<span class="caret"></span>
				 </button>
				 <ul class="dropdown-menu" role="menu">
				    <li><a href="#"><span class="flag-icon flag-icon-br"></span>Brazil</a></li>
				    <li><a href="#"><span class="flag-icon flag-icon-br"></span>Brazil</a></li>
				    <li><a href="#"><span class="flag-icon flag-icon-br"></span>Brazil</a></li>
				    <li><a href="#"><span class="flag-icon flag-icon-br"></span>Brazil</a></li>
				    <li><a href="#"><span class="flag-icon flag-icon-br"></span>Brazil</a></li>
				    <li><a href="#"><span class="flag-icon flag-icon-br"></span>Brazil</a></li>				    
				 </ul>
			   </div>
			 </div>
		  </div>
	  </div>
	</div> 	
</div>