使用 javascript 更新下拉菜单

问题描述

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

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 选择框应自动更新为 number 2 选项

谁帮我写代码

解决方法

请尝试以下代码片段（我只在没有 db 逻辑的情况下测试它，因为您只想更新 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>

我倾向于将程序状态保持在变量中，然后将其呈现为 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() 对象中，该对象跟踪每个字段的状态更改标志。如果一个字段是“脏的”，那么它将触发重新渲染。那都是普通的 JavaScript。

electron electron javascript pouchdb