使用 javascript 更新下拉列表
[英]Update drop down with javascript
问题描述
I am working on simple desktop billing application using Electron js and pouch db
我正在使用 Electron js 和 pouch db 开发简单的桌面计费应用程序
here is my html code这是我的 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>
My question is我的问题是
when i first save the form the values will be当我第一次保存表单时，值将是
sn.no - 1序号 - 1
name - xxx姓名 - xxx
age - yyy年龄 - 年
after saving form the s.no select box should be automatically updated with number 2 option保存表格后， s.no select 框应自动更新为number 2选项
anyone help me with code有人帮我写代码
2 个解决方案
解决方案1
1 已采纳 2021-05-13 17:42:58
Please try the following snippet(I only test it without the db logic since you only want to update the html element):请尝试以下代码段（我只在没有 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>
解决方案2
1 2021-05-13 17:55:07
I tend to want to keep the programs state in variables, then render it as html.我倾向于将程序 state 保留在变量中，然后将其呈现为 html。 The code above treats the menu like the state;上面的代码将菜单视为 state； like it is the holder of the values.就像它是价值观的持有者一样。 Frameworks like ReactJS maintain state and render the html when the state changes;像 ReactJS 这样的框架维护 state 并在 Z9ED39E2EA931586B6A985A96 更改时渲染 html;4EF5736 this one way data-flow makes the program fast and makes rendering smooth.这种数据流的一种方式使程序快速并使得渲染平滑。 So something like this;所以像这样;
// 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);
}
}
NOTE: it's even better if you set a flag when state changes, then check that in a requestAnimationFrame() callback, and call enforceMenuState() in that callback if the state has changed, so that rendering happens when the browser is ready.注意：如果在 state 更改时设置一个标志会更好，然后在 requestAnimationFrame() 回调中检查，如果 state 已更改，则在该回调中调用 enforceMenuState()，以便在浏览器准备好时进行渲染。 I used that technique in this code ;我在这段代码中使用了这种技术； updateView() is called by requestAnimationFrame(). updateView() 由 requestAnimationFrame() 调用。 The state is held in a RollbackState() object, which keeps track of the state change flags for each field. state 保存在 RollbackState() object 中，它跟踪每个字段的 state 更改标志。 If a field is 'dirty', then it will trigger a re-render.如果一个字段是“脏”的，那么它将触发重新渲染。 That is all plain JavaScript.这都是普通的 JavaScript。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.