jQuery Forum

I have two comboboxes generated from two select form elements using the ui.combobox widget.

If a value from one combobox is selected than the option list in the second combobox is accordingly modified. The modified list is generated via an ajax call and the 'disabled' attributes of the option elements are set to true or false in the 'success' method of that call (i.e. combobox 1 contains as option values country names and combobox 2 city names. When a country is selected only those cities located in that country should be shown in the second option list).

This works correctly as far as I can see and by selecting a certain option value in combobox 1 the appropriate values are returned by the ajax call and the options in combobox 2 are set to disabled=true or disabled=false.

However, the problem is that the displayed options in the drop-down list of combobox 2 are not updated and don't show the list according to its modified enable/disabled setting after a value in combobox 1 was selected.

The option list in combobox 2 only shown correctly if
    either an alert() call is present
    or if the same value in combobox 1 is selected a second time.

So it seems to me that the underlying list of combobox 2 is correctly changed, but the display on the website is not happening (I guess the option list is shown before the ajax function finished?)
Using async:false in the ajax call doesn't change anything.
If I put at the end of the select: method a 'return false' statement for debugging than the list of combobox 2 also shows the correct entries. This I don't understand at all, is the list correct for a while and than overwritten again??

Is there anything I need to do (like a _trigger call maybe?) to make the drop-down list reflect the changes made in the option list?
Thanks.

This is part of the code I use:

1.         (function( ) {
                   jQuery.widget( "ui.combobox", {
                           options: {
2.                           targetid: '', // id of combobox 2
                             formelementid: '',
                             jsonupdate: '',
                             jsonpath: ''
                           },
                           _create: function() {
3.                         :
                           },
                           select: function( event, ui ) {
   
4.                             ui.item.option.selected = true;
                               self._trigger( "selected", event, {
                                       item: ui.item.option
                               });
   
   
5.                             jQuery.ajax({
                                   url: options.jsonpath+'/includes/SPT_Json.php',
                                   dataType: "json",
                                   async: false,
                                   data: { term: termstring },
                                   error: function (XMLHttpRequest, textStatus, errorThrown) { alert("ERR#1:"+errorThrown+':'+textStatus+' ('+termstring+')'); },
                                   success: function (data) {
                                      if (data != null) {
   
6.                                      targetid = options.targetid;
                                        jqid = '#'+targetid+'';
                                        var v = document.getElementById(targetid);
                                        jQuery.map(data.values, function (item) {
                                            for (i=v.options.length-1;i>=1;i--) // keep first ? or *
                                                {
                                                if (item.value == v.options[i].value) {
                                                   v.options[i].disabled = false;
                                                   jQuery(jqid)[0].options[i].disabled = false;
                                                } else {
7.                                                 v.options[i].disabled = true;
                                                   jQuery(jqid)[0].options[i].disabled = true;
8.                                              }
                                             }
                                         });
                                       // alert('If this alert is enabled the correct option list shows up');
                                      }
                                    }
                               });
                          },
9.                       change: function( event, ui ) {
10.                       :
11.                       }
12.                    })
                       .addClass( "ui-widget ui-widget-content ui-corner-left" );
                    });
            })( jQuery );