Question

I have a few multi select boxes on a page. When the user clicks a certain checkbox, I would like one of the multiselect boxes on the page to automatically be clicked with a certain value. Do you have any idea of how to do this?

Thank you!

$("#select_country").multiselect({
  multiple: false,
  header: "Select a country",
  noneSelectedText: "Select a country",
  selectedList: 1
});

======
so far I’ve tried these methods with no success:

$("#select_country").multiselect("widget").find("input:checkbox").each(function(){
  this.click();
 }); 

$("#select_country").multiselect("widget").find("input:checkbox").triggerHandler('click');

$("#select_country").trigger('click');

Answer 1

See if this helps (demo @ http://jsfiddle.net/ehynds/PKypd/):

var second = $("#select_something").multiselect();

$("#select_country").multiselect({
    multiple: false,
    header: "Select a country",
    noneSelectedText: "Select a country",
    selectedList: 1,
    click: function( event, ui ) {

        // if the user clicks "usa", check the first box
        // in the second select.  if the user selects "canada",
        // check the second box.
        //
        // the call to filter() ensures that the items from the
        // second select remain selected if the user chooses
        // the same item from the first select multiple times.
        //
        // you can easily swap out .eq() for another filter()
        // and to choose checkboxes by value instead of their
        // position.
        second.multiselect('widget')
            .find(':checkbox')
            .eq(ui.value === 'usa'? 0 : 1)
            .filter(':not(:checked)')
            .each(function(){
                this.click();
            });
    }
});

Also, don’t forget that multiselect is simply a visual enhancement to the underlying select box. Any changes you make in multiselect are also made on the select element itself, and vice versa. Therefore, you don’t have to mess around figuring how to do this in multiselect; you can make an option tag selected in the original select box, and call .multiselect('refresh') to tell the widget to refresh itself.

You are correct about calling .click() on the DOM node, not triggerHandler() or $.fn.click(). The reason is because of this bug in jQuery, where trigger(“click”) calls the handler before the checkbox native click() method.