CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Anuj
Anuj

Reputation: 87

Bootstrap button dropdown child element's class is getting removed when clicked on other button's dropdown items

Here is the fiddle.

What I am trying to do is use Bootstrap's drop-down menu instead of select boxes and utilize list items instead of option. The data that is being retrieved from selected list item and put into its corresponding button element is given a class of 'active-select' on a click event (shown in blue after it renders). Like this:

<li><a href="#" class="active-select">New York<a><li>

Clicking on other list item should remove the above mentioned class from other list items only within the corresponding button element. But the class is being removed from the selected list item from other button drop-down group as well. Like this:

<li><a href="#" class>New York<a><li>

Can anyone please help?

Upvotes: 0

Views: 1110

Answers (1)

Sandeep Nayak
Sandeep Nayak

Reputation: 4757

The problem occurs because you are using parents instead of parent:

This line of code is the problem:

thisEl.parents('li').siblings().find('a').removeClass('active-select'); // parents targets all li's above `a` and hence siblings afterwards targets other drop-downs.

Instead use parent like this:

thisEl.parent('li').siblings().find('a').removeClass('active-select');

Full working code

	(function () {
		var search_btn = $('.select-style').find('button.btn-inverse'),
			selectOptions = $('.select-style ul.dropdown-menu li').find('a');

		selectOptions.on('click', function (e) {
			e.preventDefault();

			var thisEl = $(this);
			var getTextData = thisEl.text();

			thisEl.addClass('active-select');
            // Use .parent and not .parents
			thisEl.parent('li').siblings().find('a').removeClass('active-select');

			thisEl.parents('.btn-group').find('button[type=button]').html( getTextData );
		});
	}) ();
ul.homeInputBaropenState { list-style-type: none; width: 500px; }
ul.homeInputBaropenState li { display: inline;  }
ul.homeInputBaropenState li a.active-select { color: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<ul class="select-Section homeInputBaropenState">
                <li class="select-style">
                    <div class="btn-group">
                        <button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Select City
                        </button>

                        <ul class="dropdown-menu">
                            <li><a href="#">New York</a></li>
                            <li><a href="#">San Fransisco</a></li>
                            <li><a href="#">Los Angeles</a></li>
                            <li><a href="#">Detroit</a></li>
                        </ul>
                    </div>
                </li> 

                <li class="select-style">
                    <div class="btn-group">
                        <button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Select Type 
                        </button>
                    
                        <ul class="dropdown-menu">
                            <li><a href="#">Men</a></li>
                            <li><a href="#">Women</a></li>
                            <li><a href="#">Kids</a></li>
                        </ul>
                    </div>
                </li>

                <div class="clearfix"></div>
            </ul>

Upvotes: 1

Related Questions