刷新动态JQuery多选菜单不起作用。

Question

新年快乐。我正在尝试构建一个多选列表，其中(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>

- user2880254

---

你应该明确指出这个 jQuery 小部件是与 jQuery Mobile 一起使用的：http://api.jquerymobile.com/selectmenu/ - Akaryatrh

$( "#addequip_form_equip" ).selectmenu( "refresh" ); 应该可以解决问题... 你能确认 select 元素是否按预期填充了吗？在调用 refresh 的那一行设置一个断点，在控制台中键入 $("#addequip_form_equip").html()。 - Mister Epic

我相信这是的，我对这个小部件不太熟悉，我在我的问题中添加了HTML输出。元素的格式化效果看起来符合预期。 - user2880254

Answer 1

经过一些尝试，我成功解决了我的问题。在第二个查询的for循环之后，在关闭整个tx.executeSql之前，我执行了一个选择菜单刷新操作。我已经更新了上面的代码以显示我的更正代码。感谢大家的关注和建议。

- user2880254