CODEWITHSUNDEEP
javascriptjqueryjquery-uimulti-select
Mayer M
Mayer M

Reputation: 243

multiselect not selecting values programmatically

I'm having an issue with a DropDownList multiselect (Reference).

What I want...

I want to programmatically click some checkboxes from the dropdown using their values (for postback matters).

BRIEFING

In 'Reference', I found out that there's a bug in jQuery, so I needed to do this ->

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

So, I tried this and worked... then, I added the "[value='value']", and it worked. That's exactly what I needed.

$("select").multiselect("widget").find(":checkbox[value='value']").each(function(){
    this.click();
});

Here's what I did: I obtained an array with the values of the selected before postback (consultantValues). Then, I want to find the checkbox on the dropdown "Consultant" with a value from the array, and finally, click it.

Code->

for (var x = 0; x < consultantValues.length; x++) {
    var consultantSelected = ":checkbox[value='" + consultantValues[x] + "']";
    var doConsultantStringCode = $("id$='ddlConsultant']").multiselect("widget").find(consultantSelected);    
    for (var a = 0; a < doConsultantStringCode.length; a++) {
        doConsultantStringCode[a].click();
    }
}

This works like a charm :B By the way, I use the "for" instead of the "each" because it runs faster.

PROBLEM

In other dropdown, I try to do the same... it worked, but suddenly it stopped working :/

Code ->

for (var i = 0; i < selectedManagements.length; i++) {
   var checkboxValue = ":checkbox[value='" + selectedManagements[i] + "']";
   var findCheckbox = $("[id$='ddlManagement']").multiselect("widget").find(checkboxValue);
   for (var k = 0; k < findCheckbox.length; k++) {
     findCheckbox[k].click();
   }
}

I'm stuck with this :/

NOTES:

Upvotes: 1

Views: 2299

Answers (2)

Mayer M
Mayer M

Reputation: 243

I finally managed to resolve this.

I work with some people, and we all work on the same site. The problem was that someone moved the part where the multiselect was set (with it's configuration) AFTER my code...

So, my code was looking for something that still didn't exist, so it did nothing.

Two possible things to do:

  • 1: Put the code that selects programmatically after the code that sets the multiselect.
  • 2: Make the dropdown multiselect. Then add your code, and finally add the multiselect configuration. (what I finally did XD)

2: Example: 

        management.attr("multiple", 'multiple');

        if (selectedManagements != null) {
            for (var z = 0; z < selectedManagements.length; z++) {
                var checkboxValue = "[value='" + selectedManagements[z] + "']";
                var findSelectedCheckbox = management.children(checkboxValue);
                for (var lambda = 0; lambda < findSelectedCheckbox.length; lambda++) {
                    findSelectedCheckbox[lambda].setAttribute('selected', true);
                }
            }
        } 

           [...]

            management.multiselect({
                selectedList: 2,
                noneSelectedText: 'Select a management',
                width: 300
            }).multiselectfilter();

PS: I thank @mvbl-fst for helping improving my code :)

Upvotes: 0

mvbl fst
mvbl fst

Reputation: 5263

Instead of emulating clicks, why don't you just add checked="checked" attribute? This is actually way too hack-ish to trigger DOM events that user did not initiate.

Just do this:

$("select").multiselect("widget").find(":checkbox").each(function(){
    this.attr({ checked: "checked" });
});

Upvotes: 2

Related Questions