Question

I’m using this plugin – http://plugins.jquery.com/project/styledSelect to style a Select box on my page. Demo page here – http://liepins.org/files/jQuery.styledSelect-1.0/examples.html

I’ve trying to figure out a way to open and close the select box from another element on the page, something like –

    $('#show-lists').styledSelect(); //apply the plugin on page load

    $("#another-button").toggle(
      function () {
         $('#show-lists').clickSelect() //open the dropdown
      },
      function () {
         $('#show-lists').closedSelect() //close it
      },
    );

The above code doesn’t work, it’s just there to illustrate. Any idea how I can access these methods externally? Or can anyone suggest an alternative?

Thanks in advance.

Answer 1

You could modify the plugin to expose them as events bound to the control, e.g.

    closedSelect();
    s.change(closedSelect);
    currentZIndex -= 3;

    // New lines
    s.bind('openSelect', clickSelect);
    s.bind('closeSelect', closedSelect);
});

and then trigger the events from your code:

$("#another-button").toggle(
  function () {
     $('#show-lists').trigger('openSelect');
  },
  function () {
     $('#show-lists').trigger('closeSelect');
  },
);

although as you can see closedselect is already bound to the .change() event, so you could just call $('#show-lists').change(); instead for the close case – but I think I’d stick to the separate event myself for clarity.