Controlling jQuery UI Selectmenu

I’m just started using selectmenu and wanted to share how to control it. It’s not completely obvious to inexperienced jquery UI folks like myself…

Specifying a trigger function

First, we create the selectmenu UI widget from an existing <select> control, with the id=”selectmenu”.

$("#selectmenu").selectmenu({
  change: selectmenuChange
});

And selectmenuChange…
function selectmenuChange(event, value)
{
  switch(value.value)
  {
    case 0:
      alert('Hello!');
    break;
  }
  $("#selectmenu").selectmenu("value", "ignore"); // Put it back on the first option.
}

The last line should give you a clue as to what comes next.

Controlling the selectmenu after creation

$("#selectmenu").selectmenu("value", "ignore"); // Put it back on the first option.
$("#selectmenu").selectmenu("open"); // Open the selectmenu
$("#selectmenu").selectmenu("focus"); // Give it focus

Posted February 9th, 2010 in Software. Tagged: , , , .

One comment:

  1. Ashin:

    Thanks heaps for the post, it helped me out alot.

    Although i had trouble changing the selected option using the string value of the option. I was only able to get it to work using the index number instead so:

    this worked for me:
    $(“#selectmenu”).selectmenu(“value”, 0);

    where this didnt:
    $(“#selectmenu”).selectmenu(“value”, “ignore”);

Leave a response: