如何解决使用 javascript 更新下拉菜单
我正在使用 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 选择框应自动更新为 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。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
