javascript - 刷新动态jquery多个选择菜单不起作用

新年快乐。我有多个选择列表，我正在尝试构建(data-native-menu =“false”) 和 是通过Websql查询动态添加的。当我运行代码时，它不会在页面上添加任何选项。当我删除 multiple =“multiple” data-native-menu =“false” 属性时，代码可以很好地工作并按预期的方式添加数据。我尝试添加

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

和其他几种变体。没有显示控制台日志，所以我认为问题出在刷新的地方，因为代码似乎没有其他属性地追加到列表中。我已经咨询了jQuery文档，并在这里阅读了其他几篇文章，但无法解决此问题，感谢您的帮助。代码如下

HTML

<div data-role="fieldcontain">
<label for="addequip_form_equip" class="select">Select Equipment:</label>
<select name="addequip_form_equip" id="addequip_form_equip" multiple="multiple" data-native-menu="false">
<option>Select Equipment</option>
</select>
</div>

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<len; i++){
                $("#addequip_form_equip").append("<optgroup id='"+results.rows.item(i).cat_id+"' label='"+results.rows.item(i).cat_name+"'></optgroup>");

                }
            });

            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<len; i++){
                $("#addequip_form_equip optgroup[id="+results.rows.item(i).cat_id+"]").append("<option value="+results.rows.item(i).websql_id+">"+results.rows.item(i).name+"</option>");

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

        });

    }

    });
    });
}

编辑

当检查元素时，这是生成的html，我对这个小部件不是很熟悉，但是看起来好像所有东西都被填充到了它所属的位置。

<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
    <label for="addequip_form_equip" class="select ui-select">Select Equipment:</label>
    <!--    <select name="addequip_form_equip" id="addequip_form_equip" multiple="multiple" data-native-menu="false"> -->
    <div class="ui-select">
        <a href="#addequip_form_equip-listbox" role="button" id="addequip_form_equip-button" aria-haspopup="true" aria-owns="addequip_form_equip-menu" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="arrow-d" data-iconpos="right" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-right ui-li-has-count ui-btn-up-c" data-rel="popup"><span class="ui-btn-inner"><span class="ui-btn-text"><span>Select Equipment</span></span><span class="ui-icon ui-icon-arrow-d ui-icon-shadow">&nbsp;</span></span><span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="display: none;">0</span></a>
        <select name="addequip_form_equip" id="addequip_form_equip" multiple="multiple" data-native-menu="false" tabindex="-1">
            <option data-placeholder="true">Select Equipment</option>
            <optgroup id="1" label="Accessories">
            <option value="1">Light Meter</option>
            <option value="2">Circular Reflector Disc</option>
            </optgroup><optgroup id="2" label="Backgrounds">
            <option value="3">Muslin Background</option>
            <option value="4">Muslin Background</option>
            <option value="5">Muslin Background</option>
            </optgroup><optgroup id="3" label="Camera Bodies">
            <option value="6">Nikon D4</option>
            <option value="7">Nikon D800</option>
            <option value="8">Canon EOS 5D Mark III</option>
            <option value="9">Canon EOS Rebel XSi</option>
            </optgroup><optgroup id="4" label="Lenses">
            <option value="10">Canon EF 14mm f/2.8L II USM</option>
            <option value="11">Canon EF 28-300mm f/3.5-5.6L IS USM</option>
            <option value="12">Nikon AF Nikkor 80-400mm f/4.5-5.6D ED VR</option>
            <option value="13">Nikon 1 Nikkor VR 10-100mm f/4.5-5.6</option>
            </optgroup><optgroup id="5" label="Lighting">
            <option value="14">Profoto D1 Air 500W/s Monolight</option>
            <option value="15">Profoto B1 500 AirTTL Battery Powered Flash </option>
            </optgroup>
        </select>
        <div style="display: none;">
            <!-- placeholder for addequip_form_equip-listbox -->
        </div>
    </div>
</div>

最佳答案

经过一番摆弄之后，我得以解决我的问题。在关闭整个tx.executeSql之前，我在第二个查询的for循环之后执行了一个选择菜单刷新。我更新了上面的代码以显示我的更正代码。感谢大家的关注并提供建议。

关于javascript - 刷新动态jquery多个选择菜单不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20870605/