CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
Mohamed Samy
Mohamed Samy

Reputation: 941

Bootstrap 3 Dropdown Menu

hello all i have a sample drop down menu please check the code . all i need to remove the default option ( Select a Country ) and replace the first li withe flag icon

HTML :

<form>
                  <div class="carousel-search hidden-phone">
                <div class="btn-group">
        <a class="btn dropdown-toggle btn-select" data-toggle="dropdown" href="#">Select a Country <span class="caret"></span></a>
                      <ul class="dropdown-menu">
                <li><i class="flag flag-us"></i><a class="flagLi" href="#">د . أمريكي</a></li>
                <li><i class="flag flag-ae"></i><a class="flagLi" href="#">د . اماراتي</a></li>
                <li><i class="flag flag-eg"></i><a class="flagLi" href="#">ج . مصري</a></li>

                  </ul>
                    </div>
              </div>
                </form>

JAVA :

    $(".dropdown-menu li a").click(function(){
  var selText = $(this).text();
  $(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
});

bootply Link : Here

Upvotes: 0

Views: 314

Answers (1)

core_pro
core_pro

Reputation: 161

I'm guessing the "i" elements contains the flags. $(".dropdown-menu li") has all the elements you need not $(".dropdown-menu li a").

so you need to replace that coded with $(".dropdown-menu li").click(function()...

Also, call $(this).html() rather than text

Check out my code here http://www.bootply.com/H8aJxXHkhn

Upvotes: 2

Related Questions