Can't set the value to an empty string when using option groups

[tmcneillParticipant]

As the title states, I have a drop down list with a “No selection” item that has an empty string as a value.

Here is an example of the setup I’m describing: http://jsfiddle.net/9qpav1mn/3/

If you just attempt to set the value to an empty string, the “– No Selection –” option should be selected. It works just fine when selecting any other option. It also works correctly if the group property is removed from each item in the source. And curiously, I’m able to select the “– No Selection –” item using an empty string if I change the value of that item to a single space (” “).

I noticed that values to be set have white space trimmed. So I can select the item with a value of ‘A’ by using any of these:
.jqxDropDownList(‘val’, ‘A’)
.jqxDropDownList(‘val’, ‘ A’)
.jqxDropDownList(‘val’, ‘A ‘)
.jqxDropDownList(‘val’, ‘ A ‘)

If I had to guess, I’d say that when a value is set, it’s run through a trim whitespace function first then there’s some kind of comparison by checking the length of the processed string and doing nothing if it has a length of 0. Or possibly, since the option group labels appear as items (with a value of null) when using the ‘getItems’ function, the code makes a match between an empty string and null and attempts to select the group label. But it realizes it’s a group label, so it shouldn’t be selected, and it gives up without checking other items.

Or maybe I’m just way off with these guesses. Anyway, is there some kind of workaround so I can use option groups, have an item in the list with an empty string as a value, and select that item using the ‘val’ function?

[ChristopherParticipant]

Hi tmcneill,

There’s no need to use the “val()” method to select an option from the jqxDropDownList with an empty string value. There’s a simple workaround that will make the desired behavior working. Here’s how to do it:

$('#jqxButton').on('click', function () {
                    var new_val = $('#textInput').val();
                    if (new_val === '') {
                        $("#jqxDropDownList").jqxDropDownList('selectIndex', 0);
                    }
                    $("#jqxDropDownList").jqxDropDownList('val', new_val);
                });

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts