Jquery Standardwort löscht nicht beim Auslösen der Dropdown-Liste

Question

Hallo Fellow stackoverflow.

Ich arbeite an einer jQuery für Dropdown-Funktion. Mein Motiv ist, wenn Benutzer A in Richtung einer Seite gehen.

Es wird wie unten ein Drop-Down-Option-Code sein:

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

Dann habe ich die statische als ersten Drop-Down, die "Select" ist. Also setze ich eine Div-Klasse namens result.default. Wie es zeigen wird.

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

Dies ist die CSS:

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

Dies ist die Funktion jQuery:

$('#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');    
    } 
}); 

Dies ist der jSFiddle

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

So ist mein Motiv, wenn der Benutzer Wählen Sie Option 2, Strände. Ich möchte den active.default entfernen. Aber es ist statisch, wenn auch i-Option wählen 2

Answer 1

Wenn Sie mehrere Klassen in HTML verwenden, sollten Sie sie mit einem Leerzeichen und nicht mit einem Punkt trennen. Also Ihr erstes Ergebnis div sollte sein:

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

Und alles funktioniert :)

Sie waren ein Punkt nahe an der Lösung!

Answer 2

JSFIDDLE:http://jsfiddle.net/EFM9b/43/

hinzufügen eine aktive Klasse auf der Standardoption und dann die Standardklasse entfernen.

Sie benötigen nicht die Standardeinstellung, wenn Sie die aktive Klasse. Wenn Sie Ihre Standardoption mit der aktiven Klasse ausstatten, können Sie das haben, was Sie wollen.

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




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

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



<select id="preference"> 
    <option value="select">select</option> 
    <option value="beaches">beaches</option> 
    <option value="museums">museums</option> 
    <option value="mountains">mountains</option> 
</select> 
<div class="result active" 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>