Selectables issue

Selectables issue

Hi,

i have two selectables with two textboxs in a table (The first selectable contain the category and the second the sub-category). The textboxs are used for search in the Selectables. If i select a list item from the first selectable and execute a search, is also selected the list item of second selectable with the same ID of selected item of first selectable.

This is my Javascript code:
  1.         function Category() {
                $( "#selectableCat").selectable( "destroy" );
                $("#selectableCat").bind("mousedown", function(e) {e.metaKey = true;}).selectable({
                    autoRefresh: false,
                    create: function(event,ui){
                        $.each(selectIdCat, function(index,value) {
                            $("#"+value).add("#selectableCat").addClass("ui-selected");
                        })
                    },
                    stop: function(event,ui){
                        $( "#resultDescCat" ).html(selectDesCat.toString());
                        $( "#resultIDCat" ).html(selectIdCat.toString());
                        caricaEleMIcro('0');
                    },
                    selected: function(event,ui) {
                        current_sel_id = ui.selected.id;
                        current_sel_des = ui.selected.innerText;
                        selectIdCat.push(current_sel_id);
                        selectDesCat.push(current_sel_des);
                    },
                    unselected: function(event,ui) {
                        current_uns_id = ui.unselected.id;
                        current_uns_des = ui.unselected.innerText;
                        $.each(selectIdCat,function(index,value) {
                            if (value == current_uns_id)
                                selectIdCat.splice(index,1);
                        })
                        $.each(selectDesCat,function(index,value) {
                            if (value == current_uns_des)
                                selectDesCat.splice(index,1);
                        })
                    }
                })
            }

            function SubCategory() {
                $( "#selectableSub").selectable( "destroy" );
                $("#selectableSub").bind("mousedown", function(e) {e.metaKey = true;}).selectable({
                    autoRefresh: false,
                    create: function(event,ui){
                        $.each(selectIdSub,function(index,value) {
                            $("#"+value).add("#selectableSub").addClass("ui-selected");
                        })
                    },
                    stop: function(event,ui){
                        $( "#resultDescSub" ).html(selectDesSub.toString());
                        $( "#resultIDSub" ).html(selectIdSub.toString());
                    },
                    selected: function(event,ui) {
                        current_sel_id = ui.selected.id;
                        current_sel_des = ui.selected.innerText;
                        selectIdSub.push(current_sel_id);
                        selectDesSub.push(current_sel_des);
                    },
                    unselected: function(event,ui) {
                        current_uns_id = ui.unselected.id;
                        current_uns_des = ui.unselected.innerText;
                        $.each(selectIdSub,function(index,value) {
                            if (value == current_uns_id)
                                selectIdCat.splice(index,1);
                        })
                        $.each(selectDesSub,function(index,value) {
                            if (value == current_uns_des)
                                selectDesSub.splice(index,1);
                        })
                    }
                })
            }


































































The issue occurs when is called the event "create" in Category function.

Do you know how to fix it?


Thanks in advance.