CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Zeliax
Zeliax

Reputation: 5386

Changing color and text of bootstrap dropdown upon click

I have a <li> on which I've added a bootstrap dropdown. Inside this dropdown I have two options <li> with different id's and text. I want to be able to change the text of the dropdown based on which of the two choices are selected.

<ul>
  <li class="listItem">
    <h5>Item Header</h5>
    <div class='dropdown'>
      <button id='flagchoice' class='btn btn-default dropdown-toggle' type='button' data-toggle='dropdown'>Category<span class='caret'></span></button>
      <ul class='dropdown-menu dropdown-menu-right'>
        <li id='choice1'>Choice 1</li>
        <li id='choice2'>Choice 2</li>
      </ul>
    </div>
  </li>
</ul>

I've created this JSFiddle to illustrate what I'm talking about.

I want to use the text, color and background-color of the dropdown option that is selected.

I tried using this, which I've used similarly in another case of a dropdown, but it doesn't work in this case:

$(".dropdown-menu li#choice1").click(function(){
  $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
  $(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});

$(".dropdown-menu li#choice2").click(function(){
  $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
  $(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});

EDIT1:

I guess I forgot to mention that similarly to how it is illustrated in my JSFiddle the ´listItem´ is added using javascript code dynamically and the amount of choices in the dropdown will be varying.

Upvotes: 1

Views: 1364

Answers (1)

StaticBeagle
StaticBeagle

Reputation: 5175

Your jQuery code worked for me. I've modified it a bit to avoid having two click handlers but feel free to revert it back.

$(document).ready(function() {
        $(".dropdown-menu li").click(function(){
            var color = $( this ).css( "color" );
            var bgColor = $( this ).css( "background-color" );
            var parent = $(this).parents(".dropdown").find('.dropdown-toggle');
            parent.html($(this).text() + ' <span class="caret"></span>');
            parent.val($(this).data('value'));
            parent.css( {"background-color" : bgColor, "color" : color} );
        });

});

Here is a JSFiddle I created
https://jsfiddle.net/q79fpua4/2/

EDIT
To deal with dynamically added elements the click handler has to be added to the document itself since the menu items don't exist when the document is first loaded. This should do the trick.

$(document).ready(function() {
        $(document).on("click", ".dropdown-menu li", function(){
            var color = $( this ).css( "color" );
            var bgColor = $( this ).css( "background-color" );
            var parent = $(this).parents(".dropdown").find('.dropdown-toggle');
            parent.html($(this).text() + ' <span class="caret"></span>');
            parent.val($(this).data('value'));
            parent.css( {"background-color" : bgColor, "color" : color} );
        });
});

Upvotes: 1

Related Questions