6

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.

Prasanna
  • 779
  • 5
  • 13
Bin4ry
  • 67
  • 4

2 Answers2

4

$('#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));
});
Ram
  • 143,282
  • 16
  • 168
  • 197
  • When i click the dropdown, and supposed to get the text inside the tag. I only get in response: [Object object] – Bin4ry Jun 12 '15 at 08:08
  • @Bin4ry That's because you are alerting a jQuery object. You should use `console.log` for debugging. Also for logging the text you should log the `getText` variable not that jQuery object. – Ram Jun 12 '15 at 08:09
3

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>
Alejandro Teixeira Muñoz
  • 2,758
  • 1
  • 22
  • 31
  • How would i make it so it toggles the class i get, this is what i tried: $(document).ready(function() { $('#dropdown').change(function() { var getText = $('#dropdown option:selected').html(); $('.overlay-'+getText).toggle(); }); }); – Bin4ry Jun 12 '15 at 08:12
  • $("#objID").toggleClass("classname"); let me make a change to show you – Alejandro Teixeira Muñoz Jun 12 '15 at 08:13
  • well this didnt work: $('#dropdown').toggleClass('.overlay-'+getText); – Bin4ry Jun 12 '15 at 08:19
  • you need to remove the "." from your class name. the . is only used in CSS or JQUERY selectors to mean THIS is a class: "$(".green") <-- it looks for elements with "green" class, not ".green" the . means class, the # ID.... http://www.w3schools.com/cssref/css_selectors.asp – Alejandro Teixeira Muñoz Jun 12 '15 at 08:21