Przełącz klasa z menu rozwijanego

Próbuję przełączyć klasę, wybierając opcję z menu rozwijanego, próbowałem za pomocą alert(), aby sprawdzić, czy działa, ale nie wydaje się, aby go do pracy.Przełącz klasa z menu rozwijanego

HTML:

<html> 
<body> 
    <select id="dropdown"> 
     <option value="1">Steinkjer</option> 
     <option value="2">Verdal</option> 
    </select> 
</body> 
</html>

Javascript:

$('#dropdown option:selected').click(function(){ 
    var getText = $('#dropdown option').text(); 
    alert($('.overlay-'+getText)); 
});

Proszę mi pomóc rozwiązać ten problem.

Źródło

2015-06-12 Bin4ry

(” Opcja #dropdown: selected "). text(); – Bugfixer

możliwy duplikat [jQuery toggle div from select option] (http://stackoverflow.com/questions/2767284/jquery-toggle-div-from-select-option) – Bugfixer

$('#dropdown option:selected') nie jest obiektem na żywo. Twój kod wiąże obsługę kliknięć z wybraną opcją podczas ładowania strony. Powinieneś użyć delegowania wydarzeń lub lepiej posłuchać zdarzenia change elementu select.

$('#dropdown').on('change', function() { 
    // Get text content of the selected option 
    var getText = $('option:selected', this).text(); 
    // Get current value of the select element 
    // var getValue = this.value; 
    console.log(getText); 
    console.log($('.overlay-'+getText)); 
});

Źródło

2015-06-12 08:01:03 undefined

Po kliknięciu menu rozwijanego i otrzymaniu tekstu wewnątrz znacznika

@ Bin4ry To dlatego, że ostrzegasz obiekt jQuery. Do debugowania powinieneś użyć 'console.log'. Również do rejestrowania tekstu należy zalogować zmienną 'getText', a nie obiekt jQuery. – undefined

sprawdź mój przykład, jest pełen pracy –

Musisz:

Sprawdź document.ready jest wykonywany

przypisać zdarzenie zmienić

Aby powiązać pewne zdarzenia do elementów DOM wymaga dokumentu. gotowy, aby upewnić się, że element DOM jest pewny, że został utworzony w momencie powiązania zdarzenia .

strona nie może być manipulowany bezpiecznie aż dokument jest "gotowy".: https://learn.jquery.com/using-jquery-core/document-ready/

sprawdzić ten fragment:

$(document).ready(function() { 
 

 
    $('#dropdown').change(function() { 
 
    var getText = $('#dropdown option:selected').html(); 
 
    $("#test").removeClass(); 
 
    $("#test").toggleClass("overlay-" + getText); 
 
    }); 
 

 

 

 
});

.overlay-Steinkjer { 
 
    background-color: red; 
 
} 
 
.overlay-Verdal { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<body> 
 
    <select id="dropdown"> 
 
    <option value="1">Steinkjer</option> 
 
    <option value="2">Verdal</option> 
 
    </select> 
 

 
    <p id="test">test paragraph</p> 
 
</body> 
 

 
</html>

Źródło

2015-06-12 08:06:23

jak bym zrobić to tak, że przełącza klasę dostaję, to co próbowałem: $ (document) .ready (function() { $ („# rozwijana”) .change (function() { var getText = $ ('# rozwijana opcja: wybrana'). html(); $ ('. overlay -' + getText) .toggle(); }); }); – Bin4ry

$ ("# objID"). ToggleClass ("classname"); pozwól mi dokonać zmiany, aby pokazać –

sprawdzić zmiany !! –

Przełącz klasa z menu rozwijanego

Odpowiedz

Powiązane problemy