Question

新年快乐。我有一个多选列表我正在尝试构建（data-native-menu =“false”） 和是通过a动态添加的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>

Answer 1

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

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

1 个答案: