使用 javascript 更新下拉列表

Question

我正在使用 Electron js 和 pouch db 开发简单的桌面计费应用程序

这是我的 html 代码

function dbsubmit(){
     var Sno =  document.getElementById('number').value ;
     var date =   document.getElementById('date').value ;
     var Time =   document.getElementById('time').value ;
     

     var doc = {
          _id: Sno,
          Date: date,
          time: Time,
                
     };
     db.put(doc, function(err, response) {
          if (err) {
             return console.log(err);
          } else {
             console.log("Document created Successfully",response);
          }
     });
     
 
     

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bill System</title>
<style>
  
</style>
</head>
<body>
    <h1>Bill</h1>

    <form>
        <label for="sno">S.NO</label>
        <select name="sno" id="number">
            
        </select>
        
        <label for="fname">Name : </label>
        <input type="text" id="date" name="dtime" >
        <label for="fname">age : </label>
        <input type="text" id="time" name="dtime" >
        
        <input type="button" id=billsub  value="Save"/>      
        

    </form>

<script src="./db.js"></script>
</body>
</html>

我的问题是

当我第一次保存表格时，值将是
sn.no - 1
姓名 - xxx
年龄 - yyy

保存表格后 s.no select 框应使用 number 2 选项自动更新

有人帮我写代码

Answer 1

请尝试以下代码片段（我只在没有数据库逻辑的情况下对其进行测试，因为您只想更新 html 元素）：

const form = document.getElementById('form1');
form.addEventListener('submit', dbsubmit);
function dbsubmit(e) {
    e.preventDefault();
     var Sno =  document.getElementById('number').value ;
     var date =   document.getElementById('date').value ;
     var Time =   document.getElementById('time').value ;
     //Get select element here
     var select = document.getElementById('number');
     var doc = {
          _id: Sno,
          Date: date,
          time: Time,
     };
     //Do your db logic here to save the actual data
      db.put(doc, function(err, response) {
          if (err) {
             return console.log(err);
          } else {
            //Updating the html if the data is saved
              var opt = document.createElement('option');
              opt.value = ++doc._id;
              opt.innerHTML = opt.value;
              select.appendChild(opt);
              opt.selected = true
            
            console.log("Document created Successfully",response);
          }
     }); 
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bill System</title>
<style>
  
</style>
</head>
<body>
    <h1>Bill</h1>

    <form id="form1">
        <label for="sno">S.NO</label>
        <select name="sno" id="number" value="1">
            <option id="snoValue" value="1" selected>1</option>
        </select>
        
        <label for="fname">Name : </label>
        <input type="text" id="date" name="dtime" >
        <label for="fname">age : </label>
        <input type="text" id="time" name="dtime" >
        
        <input type="submit" id=billsub value="Save"/>      
        

    </form>

<script src="./db.js"></script>
</body>
</html>

Answer 2

我倾向于将程序状态保存在变量中，然后将其呈现为 html。上面的代码将菜单视为状态；就像它是价值观的持有者。像 ReactJS 这样的框架会维护状态并在状态更改时呈现 html；这种数据流方式使程序运行速度更快，渲染更流畅。所以像这样；

// keep a list of all the values in the menu; this is the state
// when editing the menu, update this menu state, then
// use it to redraw the select menu completely.
// (so the 'click' handler of your save button should do that)
var menuState = [];

const selectElement = document.getElementById('number');
const dateInput =   document.getElementById('date') ;
const timeInput =   document.getElementById('time') ;

function menuHandler(event) {
     var dateValue =   dateInpt.value ;
     var timeValue =   timeInput.value ;
     // TODO: validate these values
     
     menuState.append({date: dateValue, time: timeValue});
     enforceMenuState();  
}

function clearSelectOptions(select) {
    if (select) {
        while (select.options.length > 0) {
            select.remove(0);
        }
    }
}
function enforceMenuState() {
    // clear menu, the recreate it
    clearSelectOptions(selectElement);
    for (let i = 0; i < menuState.length; i += 1) {
        // create option element and add it to menu
        itemState = menuState[i];
        const option = document.createElement("option");
        option.text = `name: ${itemState.name}, age: ${itemState.age}`;
        option.value = i;
        selectElement.appendChild(option);
    }
}

注意：如果您在状态更改时设置一个标志，然后在 requestAnimationFrame() 回调中检查它，如果状态已更改，则在该回调中调用 enforceMenuState() 会更好，这样渲染就会在浏览器时发生准备好了。我在 code 中使用了该技术； updateView() 由 requestAnimationFrame() 调用。状态保存在 RollbackState() 对象中，该对象跟踪每个字段的状态更改标志。如果一个字段是 'dirty'，那么它将触发重新渲染。这很简单 JavaScript.

使用 javascript 更新下拉列表

Update drop down with javascript

javascript

pouchdb

electron