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

Solution 1:

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' );

      returnfalse;

   });

.btn-input {
   display: block;
}

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

.btn-input.btn.form-controlspan: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%;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><linkhref="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"rel="stylesheet"/><scriptsrc="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script><linkhref="https://fontawesome.io/assets/font-awesome/css/font-awesome.css"rel="stylesheet"/><linkhref="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css"rel="stylesheet"/><divclass="container"><divclass="row"><divclass="col-sm-3"><h5>Select Dropdown with FontAwesome Icons</h5><divclass="panel panel-default"><divclass="panel-body"><divclass="btn-group"><buttontype="button"class="btn btn-default dropdown-toggle"data-toggle="dropdown"><spandata-bind="label">All Leagues</span>&nbsp;<spanclass="caret"></span></button><ulclass="dropdown-menu"role="menu"><li><ahref="#"><iclass="fa fa-flag fa-fw"></i>Brazil</a></li><li><ahref="#"><iclass="fa fa-flag fa-fw"></i>Brazil</a></li><li><ahref="#"><iclass="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' );

      returnfalse;

   });

/* 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-controlspan: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%;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><linkhref="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"rel="stylesheet"/><scriptsrc="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css"rel="stylesheet"/><divclass="container"><divclass="row"><divclass="col-sm-6"><h5>Font Flag Icons</h5><divclass="panel panel-default"><divclass="panel-body"><divclass="btn-group"><buttontype="button"class="btn btn-default dropdown-toggle"data-toggle="dropdown"><spandata-bind="label">All Leagues</span>&nbsp;<spanclass="caret"></span></button><ulclass="dropdown-menu"role="menu"><li><ahref="#"><spanclass="flag-icon flag-icon-br"></span>Brazil</a></li><li><ahref="#"><spanclass="flag-icon flag-icon-br"></span>Brazil</a></li><li><ahref="#"><spanclass="flag-icon flag-icon-br"></span>Brazil</a></li><li><ahref="#"><spanclass="flag-icon flag-icon-br"></span>Brazil</a></li><li><ahref="#"><spanclass="flag-icon flag-icon-br"></span>Brazil</a></li><li><ahref="#"><spanclass="flag-icon flag-icon-br"></span>Brazil</a></li></ul></div></div></div></div></div></div>