Question

I have two select lists which are being styled using the jQuery UI Selectmenu script. This script hides the select elements and writes out its own ULs with the input elements as LIs.

I am trying to write some conditions so that if a user chooses an element from select list 1, it hides some elements from select list 2. Here is the HTML being generated dynamically by the script copied from Firebug:

    <ul id="role-menu" aria-labelledby="role-button" role="listbox" aria-hidden="true" class="ui-selectmenu-menu ui-widget ui-widget-content ui-corner-bottom form-select ui-selectmenu-menu-dropdown">

  <li role="presentation" class="ui-selectmenu-item-selected current">
    <a aria-selected="true" role="option" tabindex="-1" href="#" id="ui-selectmenu-item-343" name="ui-selectmenu-item-343">Current</a>
  </li>

  <li role="presentation" class="past">
    <a aria-selected="false" role="option" tabindex="-1" href="#">Past</a>
  </li>

Here is the jQuery snippet I’m trying to make work. I’m not sure what to use to keep the script listening for changes in the menu since .change() appears to only be for form elements. Right now I’m trying to make the script output an alert for testing but it’s not working.

$('#role-menu ul').change(function () {

    if($('li',this).hasClass('ui-selectmenu-item-selected current')) {
       alert('test');
    }
  });

Is there a better way for me to be doing this? Thanks in advance!

Answer 1

Ok if i understand you correctly you would like to work with the LI that has a special class when your select changes in this case you can add something like:

   var liCurrent =  $('li.current', $(this))

return jquery object of Li selected