Jquery default word is not deleting upon triggering dropdown list
<p>Hi Fellow stackoverflow.</p>

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

<p>There will be a dropdown option code as below : </p>

<pre><code>&lt;select id="preference"&gt;
&lt;option value="select"&gt;select&lt;/option&gt;
&lt;option value="beaches"&gt;beaches&lt;/option&gt;
&lt;option value="museums"&gt;museums&lt;/option&gt;
&lt;option value="mountains"&gt;mountains&lt;/option&gt;
</code></pre>

<p></p>

<p>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.</p>

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

<p>This is the css :</p>

<pre><code>.result {display:none;}
.result.active {display:block;}
.result.default {display:block;}
</code></pre>

<p>This is the jQuery function : </p>

<pre><code>  $('#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') &gt;= 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');            
    }
});
</code></pre>

<p>This is the jSFiddle</p>

<pre><code>http://jsfiddle.net/EFM9b/42/
</code></pre>

<p>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</p>