Icon Flags mit Wert im Dropdown-Menü

Question

Ich habe Bootstrap Dropdown-Menü mit Optionen zur Auswahl. Ich möchte Länderfahne in der Nähe von Text auf der linken Seite hinzufügen. Und ich habe es getan, aber das Problem ist, wenn ich die Option in Dropdown und senden Sie es, die Flagge wird auch über PHP/HTML gesendet. Ich weiß nicht, wie ich es hier platzieren soll, um die Flagge nicht mit <li> einzureichen und Flagge auf der linken Seite zu haben.

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 1

Select-Tropfen-downs mit 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"> 
 
\t <div class="row"> 
 
\t <div class="col-sm-3"> 
 
\t \t <h5>Select Dropdown with FontAwesome Icons</h5> 
 

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

 
\t </div> 
 
\t </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"> 
 
\t <div class="row"> 
 
\t <div class="col-sm-6"> 
 
\t \t <h5>Font Flag Icons</h5> 
 

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