FreedomPride FreedomPride - 2 months ago 6
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;} {display:block;}
.result.default {display:block;}

This is the jQuery function :

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

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

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

This is the jSFiddle

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


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 !