向 jQuery Mobile Optgroup 动态添加选项

Question

我在动态添加选项时遇到问题。目前我的 html 中有一个包含一些硬编码值的 optgroup：

<select id="opt1" multiple="multiple" data-native-menu="false" data-icon="grid" data-iconpos="left">
                <optgroup label="optgroup options" id = "opt">
                    <option value="option1">Option1</option>
                    <option value="option2">Option2</option>
                </optgroup>
            </select>

我想从我的数据库中动态添加选项。目前我正在尝试这样做：

db.transaction(function(transaction) {

transaction.executeSql('SELECT input FROM ListInput WHERE input != ""', [],
                       function(transaction, result) {
                       if (result != null && result.rows != null) {
                       for (var i = 0; i < result.rows.length; i++) {
                       var row = result.rows.item(i);
                       $('#opt').append('<option>'+ row['input'] + '</option>');

                       }

                       }

                       $("#opt").selectmenu().selectmenu('refresh');
                       },errorHandler);
},errorHandler,nullHandler);

但是，这并没有正确添加选项。该选项只出现在选择菜单上，当我单击菜单查看选项时，它没有自己的复选框，根本不显示。有什么想法吗？

Answer 1

您只是在错误的 DOM 元素上调用 selectmenu('refresh')。您应该在选择而不是选项组上调用它。所以改变这一行：

$("#opt").selectmenu().selectmenu('refresh');

到

$("#opt1").selectmenu('refresh');

DEMO