javascript - 如何使用 IndexedDB objectStore 中的值自动填充选择框？

Question

我想迭代 IndexedDB objectStore，获取结果并填充此选择框。

这是我的 HTML

 <tr>
    <td>
       <select id="opt" name="opt"></select>
    </td>
 </tr>

这是我的 JavaScript

function populateOptions() {
  var options = [ "1", "2", "3", "4", "5"];
  var opt = document.getElementById("opt");

  for (var i = 0; i < options.length; i++) {
    var option = document.createElement("option");
    option.value = options[i];
    var optionText = document.createTextNode(options[i]);
    option.appendChild(optionText);
    opt.appendChild(option);
  }

}

populateOptions();   

Answer 1

尝试以下操作:

var dbreq = indexeddb.open("db");
dbreq.onsuccess = function (conn){
    var trans = dbreq.result.transaction(["objectstore"]);
    var obj = trans.objectStore("objectstore");
    var cursor = obj.openCursor();
    cursor.onsuccess = function (e) {
            if (!cursor.result) {
               var opt = document.getElementById("opt"); 
               var option = document.createElement("option");
               option.value = cursor.result.value;                
               var optionText = document.createTextNode(cursor.result.value);                
               option.appendChild(optionText);
               opt.appendChild(option); 
               cursor["continue"]()
            } else {
               // cursor ended
            }
}

或者使用我的linq2indexeddb library并这样做:

var db = linq2indexedDB("db");
db.linq.from("objectstore").select.then(null, null, function(e){
    var opt = document.getElementById("opt"); 
    var option = document.createElement("option");
    option.value = e.data;                
    var optionText = document.createTextNode(e.data);                
    option.appendChild(optionText);
    opt.appendChild(option); 

});

有关indexeddb的更多信息，我可以引用我的blog 。在这里我经常发布有关indexedDB API的信息。