selectBoxItfied select element doesn't update the widget to reflect the newly selected value when programmatically changing the value of the select element using jQuery

[tjormola]

Consider the following scenario.

1. Load http://gregfranko.com/jquery.selectBoxIt.js/ using Firefox with Firebug installed

2. Open the Firebug console

3. Run the following JavaScript snippet in the console

   $('select').first().val('a Stateful UI Widget').change()

4. The selected value of the first native select element on the page will change. Now let's try the same for the corresponding selectBoxItfied select:

   $(":selectBox-selectBoxIt").first().val('a Stateful UI Widget').change()

5. The result is that the selection is not reflected in the selectBoxIt element. It should behave like the native select element and change to the new value.

[gfranko]

I just released SelectBoxIt v1.7.0, which includes multiple bug fixes (including yours). Everything should work for you now, but let me know if you have any other issues. Thanks!

[tjormola]

Thanks for such a quick update ;) However, I don't think this is works too well, though, as I spotted at least two rough edges.

1. The text on newly selected element is changed to the value of the associated option, not the text that is inside the original option element, which, of course, is supposed to be displayed if it exists. Below is my patch to fix this.
2. After changing the option with a jQuery snippet as described in the original posting, when clicking the SelectBoxIt dropdown open, the visually focused item is still the old item. I guess the pointer to the currently selected item is not updated and the blur.selectBoxIt and focus.selectBoxIt events that handle adding/removing of the focus CSS class to the element don't get triggered properly. After a quick peek I wasn't sure how to do that so no patch for this I'm afraid...

diff --git a/src/javascripts/jquery.selectBoxIt.js b/src/javascripts/jquery.selectBoxIt.js
index c8a3eb9..43e07e6 100644
--- a/src/javascripts/jquery.selectBoxIt.js
+++ b/src/javascripts/jquery.selectBoxIt.js
@@ -1098,7 +1098,8 @@
                     else {
 
                         // Sets the new dropdown list text to the value of the original dropdown list
-                        self.divText.text(self.originalElem.value).attr("data-val", self.originalElem.value);
+                        var text = $(self.originalElem).children("option:selected").text();
+                        self.divText.text(text.length > 0 ? text : self.originalElem.value).attr("data-val", self.originalEle
 
                     }
 

[gfranko]

I think I came up with a better solution. Below is my new code for the else condition (If a user sets the dropdown value programatically):

// If the user called the change method
else {

    var currentOption = self.list.find('li[data-val="' + self.originalElem.value + '"]');

    //If there is a dropdown option with the same value as the original select box element
    if(currentOption.length) {

        // Sets the internal currentFocus property to keep track of the current dropdown option
        self.currentFocus = currentOption.attr("id");

        //Sets the new dropdown list text to the value of the current option
        self.divText.text(self.listItems.eq(self.currentFocus).text()).attr("data-val", self.originalElem.value);

     }

 }

I have updated the code and the SelectBoxIt website, so let me know if you still have issues.

[tjormola]

Yes now it seems to work as expected. Thank you!