action on dropdown itemselect in bootstrap css

Question

I created one dropdown list using bootstrap css

I want to change the color of label when item in dropdown menu selected. But here i dont know why the dropdown items are not visible

CODEPEN DEMO

<label> Test color </label>
<div class="col-lg-6">
            <div class="input-group">
              <input type="text" class="form-control">
              <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span></button>
            <ul class="dropdown-menu pull-right">
              <li><a href="#">yellow</a></li>
              <li><a href="#">green</a></li>
              <li><a href="#">black</a></li>
              <li class="divider"></li>
              <li><a href="#">red</a></li>
            </ul>
              </div><!-- /btn-group -->
            </div><!-- /input-group -->
          </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->

How can I change the color of label when color is selected from the menu?

UPDATED CODE:

<html lang="en">
    <head>
        <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">


        <!-- Custom styles for this template -->
        <link href="sticky-footer-navbar.css" rel="stylesheet">
     <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    </head>
<body>
<label>Test color</label>
<div class="col-lg-6">
    <div class="input-group">
        <input type="text" class="form-control">
        <div class="input-group-btn btn-default">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>

            </button>
            <ul class="dropdown-menu pull-right">
                <li><a href="#">yellow</a>

                </li>
                <li><a href="#">green</a>

                </li>
                <li><a href="#">black</a>

                </li>
                <li class="divider"></li>
                <li><a href="#">red</a>

                </li>
            </ul>
        </div>
        <!-- /btn-group -->
    </div>
    <!-- /input-group -->
</div>
</body>
</html>

possible duplicate of Bootstrap 3 simple dropdown not working — zessx
– zessx, Commented Jan 2, 2014 at 14:40

Carol Skelly · Accepted Answer · 2014-01-02 13:04:34Z

2

It looks like something is wrong with the way you've included Bootstrap 3 on your codepen.

The dropdown shows fine on Bootply using Bootstrap 3.0.3: http://bootply.com/103458

You can change the label text color with something like this:

$(".dropdown-menu li a").click(function(){
  var selText = $(this).text();
  $('label').css('color',selText);
});

answered Jan 2, 2014 at 13:04

Carol Skelly

364k92 gold badges741 silver badges651 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3121782 Over a year ago

thanks a lot. I am not familiar with bootply. can you please tell me which external file you have used here and where it show in bootply demo?

Carol Skelly Over a year ago

As you can see if you view source on the preview frame in Bootply.. it's using the 3.0.3 version hosted on BootstrapCDN: netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css

user3121782 Over a year ago

thanks, please see my updated code which i tested on my localhost. but it does not popup. any issue with it?

Carol Skelly Over a year ago

Yes.. you need to include bootstrap.min.js also

Collectives™ on Stack Overflow

action on dropdown itemselect in bootstrap css

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related