Refresh dynamic jquery multiple select menu not working

Question

happy new year. i have a multiple select list i am trying to build (data-native-menu="false") the and are dynamically added through a websql query. when i run the code, it does not add any of the options anyhere to the page. when i remove the multiple="multiple" data-native-menu="false" attributes the code works great and adds the data as it is supposed to do. i have tried adding

$("#addequip_form_equip").selectmenu().selectmenu({'refresh': true});
$("#addequip_form_equip").({'refresh': true});
$("#addequip_form_equip").('refresh': true');
$("#addequip_form_equip").selectmenu('refresh');

and several other variations. no console logs are displayed so i believe the problem is somewhere with the refresh since the code seems to append to the list without the other attributes. i have consulted the jquery docs and read several other posts here and am not able to solve this problem, i appreciate any assistance. code is as follows

HTML


Select Equipment:

JS

function shotlists_open_addequip(sl_id) {
    console.log("shotlists_open_addequip function ran");
    var user_id = window.localStorage.getItem("PSLui");

    // perform db entries
    db.transaction(function(tx) 
    {
        tx.executeSql("SELECT * FROM shotlists_equipment WHERE user_id=? AND shotlist_id=?", [user_id, sl_id] , function(tx, results) {
        var len = results.rows.length;
        console.log("shotlists_equipment: " + len + " rows found.");

        // check if equipment shotlist already exists
        if(len=='1')
        {
            // todo: make alert native with phonegap notification api
            alert("Only One Equipment Check List Allowed");
            // based on api when user clicks ok redirect to shotlists page
            loadShotlists();
            $.mobile.changePage("#shotlists");
        } else {

        db.transaction(function(tx) 
        {
            tx.executeSql('SELECT * FROM equipment_cats', [], function (tx, results)
            {

                var len = results.rows.length;
                var txt="";
                for (var i=0; i");

                }
            });

            tx.executeSql('SELECT * from equipment WHERE user_id=?', [user_id], function (tx, results)
            {
                var len = results.rows.length;
                var txt="";
                for (var i=0; i"+results.rows.item(i).name+"");

                }
            $("#addequip_form_equip").selectmenu("refresh");
            });         

        });

    }

    }); 
    }); 
}

EDIT

when inspecting the element, this is the html that is generated, i am not very familiar with this widget but it looks like everything is being populated where it belongs.


    Select Equipment:
    
    
        Select Equipment 0

Refresh dynamic jquery multiple select menu not working

1 Answers