使用 javascript 更新下拉列表
[英]Update drop down with 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>
我的問題是
當我第一次保存表單時，值將是
序號 - 1
姓名 - xxx
年齡 - 年
保存表格后， s.no select 框應自動更新為number 2選項
有人幫我寫代碼
2 個解決方案
解決方案1
1 已采納 2021-05-13 17:42:58
請嘗試以下代碼段（我只在沒有 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
我傾向於將程序 state 保留在變量中，然后將其呈現為 html。 上面的代碼將菜單視為 state； 就像它是價值觀的持有者一樣。 像 ReactJS 這樣的框架維護 state 並在 Z9ED39E2EA931586B6A985A96 更改時渲染 html;4EF5736 這種數據流的一種方式使程序快速並使得渲染平滑。 所以像這樣;
// 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);
}
}
注意：如果在 state 更改時設置一個標志會更好，然后在 requestAnimationFrame() 回調中檢查，如果 state 已更改，則在該回調中調用 enforceMenuState()，以便在瀏覽器准備好時進行渲染。 我在這段代碼中使用了這種技術； updateView() 由 requestAnimationFrame() 調用。 state 保存在 RollbackState() object 中，它跟蹤每個字段的 state 更改標志。 如果一個字段是“臟”的，那么它將觸發重新渲染。 這都是普通的 JavaScript。
Javascript：動態下拉框更新
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.