FreedomPride FreedomPride - 4 months ago 16
CSS Question

Jquery default word is not deleting upon triggering dropdown list

Hi Fellow stackoverflow.

I'm working on a jQuery for dropdown function.
My motive is , when user A head towards a page.

There will be a dropdown option code as below :

<select id="preference">
<option value="select">select</option>
<option value="beaches">beaches</option>
<option value="museums">museums</option>
<option value="mountains">mountains</option>




Then i set the static as the first dropdown which is "Select" . So i set a div class called result.default. As it will show.

<div class="result.default" data-preference="select" data-style="chill">beaches and chill</div>
<div class="result" data-preference="beaches" data-style="fast-paced">beaches and fast-paced</div>
<div class="result" data-preference="beaches2" data-style="both">beaches and both</div>
<div class="result" data-preference="museums" data-style="chill">museums and chill</div>
<div class="result" data-preference="museums4" data-style="fast-paced">museums and fast-paced</div>
<div class="result" data-preference="museums5" data-style="both">museums and both</div>
<div class="result" data-preference="mountains" data-style="chill">mountains and chill</div>
<div class="result" data-preference="mountains7" data-style="fast-paced">mountains and fast-paced</div>
<div class="result" data-preference="mountains8" data-style="both">mountains and both</div>


This is the css :

.result {display:none;}
.result.active {display:block;}
.result.default {display:block;}


This is the jQuery function :

$('#preference').on('change', function(){
// set reference to select elements
var preference = $('#preference');
$('.result.default').removeClass('default');

// check if user has made a selection on both dropdowns
if ( preference.prop('selectedIndex') >= 1 ) {
// remove active class from current active div element
$('.result.active').removeClass('active');


// get all result divs, and filter for matching data attributes
$('.result').filter('[data-preference="' + preference.val() + '"]').addClass('active');
}
});


This is the jSFiddle

http://jsfiddle.net/EFM9b/42/


So , my motive is when user select option 2 , beaches. I want to remove the active.default. But it's being static when even i choose option 2

Answer

When using multiple class in HTML, you should separe them with a space, not a dot. So your first result div should be :

<div class="result default" data-preference="select" data-style="chill">beaches and chill</div>

And everything will work :)

You were one dot close to the solution !