显示来自 DB 的 optgroup 值

Question

基本上，我有一个 jQuery Mobile 风格的多选 optgroup。选择选项后，它们在实际选择显示中显示为逗号分隔。我已经使用此代码来分隔每个选定的项目，并将它们分别放在我的 SQLite 表中的不同行上：

db.transaction(function(transaction) {
               var optgroup = String($('#myselect').val());
               var optarray = optgroup.split(',');
               for(var i=0; i<optarray.length; i++){
               transaction.executeSql('INSERT INTO mytable(myvalue)\
                                      VALUES(?)',[optarray[i]],
                                      nullHandler);
               }
               });
}

我的问题是：当我返回到带有 optgroup 的页面时，如何将这些值重新显示为逗号分隔？为了更清楚：

假设我从 select 中选择了 item1 和 item2...它看起来像 item1,item2

然后将它们分成两行

第 1 行第 1 项

第 2 行第 2 项

现在，当我返回该页面时，我想查看用户在 optgroup 中以原始逗号分隔形式选择的这些值。我希望这是有道理的，任何帮助将不胜感激

编辑：通常我只会从数据库中选择并在页面加载时显示带有选择 ID 的值，但我需要在一个选择菜单中显示来自多行的多个值

编辑：按照建议我尝试过

db.transaction(function(transaction) {

  transaction.executeSql('SELECT GROUP_CONCAT (columname) FROM mytable', [],
            function(transaction, result) {
            if (result != null && result.rows != null) {
            for (var i = 0; i < result.rows.length; i++) {
            var row = result.rows.item(i);
            $('#myselect').val(row['GROUP_CONCAT(columname)']);
            }
            $('#myselect').selectmenu('refresh');
            }
            },errorHandler);
  },errorHandler,nullHandler);

但是在检查返回的值时，它是空的。我将 group_concat 行放入数据库检查器中，它正确返回逗号分隔的行，但它们仍然不会显示在我的选择中。不确定返回类型是否是问题？ group_concat 似乎返回一个字符串。

如果我尝试在没有 group_concat 的情况下显示，那么它会正确显示，但只会显示列中的最后一个元素

Answer 1

group_concat function 返回一个以逗号分隔的值列表：

SELECT group_concat(myvalue) FROM mytable

Answer 2

为了更新选择，我们可以通过选择选项并将属性“selected”设置为true来设置值。而且因为我们使用的是 jQuery mobile，所以我们还必须在完成后刷新视图。选择行后，您可以将代码放入回调中。所以像

db.transaction(function(tx) {
    tx.executeSql("select colname from selected;", [], function(tx, result) {
        dataset = result.rows;
        for (var i = 0, item = null; i < dataset.length; i++) {
            item = dataset.item(i);
            //set option with value in colname to true
            $("option[value="+item['colname']+"]").attr("selected",true);
        }
            $("#select-choice").selectmenu("refresh") //refresh select
    });
});

Demo