Trouble grabbing class name from selected jQuery UI Menu item

Trouble grabbing class name from selected jQuery UI Menu item

I'm using the new Menu widget introduced in jQuery UI 1.9 Milestone 2 ( http://blog.jqueryui.com/2010/06/jquery-ui-19m2-menu/).

In my code below, I'm attempting to have the class name of a specified <div> replaced with the class name of the selected menu item. For example:

  1. <div id="box"></div>

  3. <div id="selectMenu">
  4.       <button>Item 1</button>
  5.       <ul>
  6.             <li class="red"><a href="#">Item 1</a></li>
  7.             <li class="blue"><a href="#">Item 2</a></li>
  8.             <li class="yellow"><a href="#">Item 3</a></li>
  9. </ul>
  10. </div>

  12. <!--  Item 2 is selected -->

  14. <div id="box" class="blue"></div>

My code is below. Any help is appreciated.

  1.          $(function() {
  2. $("#consumptionUnitSelectMenu button").button({
  3. icons: {
  4. secondary: "ui-icon-triangle-1-s"
  5. }
  6. }).each(function() {
  7. $(this).next().menu({
  8. select: function(event, ui) {
  9. $(this).hide();
  10. // change text of button to selected item
  11. $("#consumptionUnitSelectMenu .ui-button-text").html(ui.item.text());
  13. // attempting change class of object to selected item class
  14. var obj1 = ui.item,
  15.      obj2 = document.getElementById('consumptionUnitIcon');

  17. obj2.className = obj1.className;
  18. },
  19. input: $(this)
  20. }).hide();
  21. }).click(function(event) {
  22. var menu = $(this).next();
  23. if (menu.is(":visible")) {
  24. menu.hide();
  25. return false;
  26. }
  27. menu.menu("deactivate").show().css({top:0, left:0}).position({
  28. my: "left top",
  29. at: "left bottom",
  30. of: this
  31. });
  32. $(document).one("click", function() {
  33. menu.hide();
  34. });
  35. return false;
  36. })
  37. });

    • Topic Participants

    • brett