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>
Advertisement
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="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <link href="https://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> <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="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://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> <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>