Menu
I try to toggle a class by selecting a option in the dropdown menu, i've tried using a alert() to check if it works but i cant seem to get it to work.
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));
});
Please help me solve this issue.
587
dropdown class indicates a dropdown menu. To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute.
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is an intentional design decision.
Use data-offset or data-reference to change the location of the dropdown.
$('#dropdown option:selected') is not a live object. Your code binds the click handler to the selected option on page load. You should either use event delegation or better listen to change event of the select element.
$('#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));
});
You need to:
- Check document.ready is executed
- Assign the change event
To bind some events to DOM elements, requires a document.ready, to ensure the DOM element is sure created at the time you associate the event.
Check this snippet:
$(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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
