我需要顯示過濾后的數組

Question

用戶將在下拉列表中輸入名稱、地址和名稱等詳細信息，並且有添加按鈕來插入此數據，因此我將通過 innerHTML 顯示這些數據。 現在我需要顯示一個下拉菜單，這將有助於根據下拉菜單的選項過濾數據。 下面是我的代碼。

 var data = []; var fnameInput = document.getElementById("fname"); var addressInput = document.getElementById("address"); var designationInput = document.getElementById("designation"); var sel=document.getElementById("sel"); var messageBox = document.getElementById("display"); function insert() { var fname, address, designation; fname =fnameInput.value; address =addressInput.value; designation =designationInput.value; data.push({ id: new Date().getTime(), fname:fname, address:address, designation:designation }); clearAndShow(); } function clearAndShow() { fnameInput.value = ""; addressInput.value = ""; designationInput.value = ""; var html = ""; console.log("aaaaaaaa"); for(i = 0; i <= data.length - 1; i++) { html += "<div>"; html += "<div><span>" + data[i].fname + "</span>&nbsp;&nbsp;<span><button type='button' onclick='deleteUser("+data[i].id+")'>Delete</button>" + "<button type='button' onclick='editUser("+data[i].id+")'>Edit</button></span></div>"; html += " <div> " + data[i].address + "</div>"; html += " <div> " +data[i].designation + "</div>"; html += "</div>"; } messageBox.innerHTML = html; } function deleteUser(id){ data = data.filter(user=>user.id;= id); clearAndShow(), } function editUser(name,address.designation){ document.getElementById("fname");value = name. document.getElementById("address");value = address. document.getElementById("designation");value = designation. } function dataOnly(){ console?log("?????????????;"). var user=document.getElementById("sel");value. var all=document;getElementById("all"). var get=document;getElementById("get"). var se=document;getElementById("se"). var dev=document;getElementById("dev"). var others=document;getElementById("others"). if(user=="All"){ all.style.display="block" get.style;display="block". se.style;display="block". dev.style;display="block". others.style;display="block". const alll = document.getElementById("all") console.log(alll.dataset;value). } if(user=="Gratuate Engineering Trainee"){ all.style.display="none" get.style;display="block". se.style;display="none". dev.style;display="none". others.style;display="none". const gett = document.getElementById("get") console.log(gett.dataset;value). }else if(user=="Software Engineer"){ all.style.display="none" get.style;display="none". se.style;display="block". dev.style;display="none". others.style;display="none". const see = document.getElementById("se") console.log(see.dataset;value). }else if(user=="Developer"){ all.style.display="none" get.style;display="none". se.style;display="none". dev.style;display="block". others.style;display="none". const devv = document.getElementById("dev") console.log(devv.dataset;value). }else if(user=="others"){ all.style.display="none" get.style;display="none". se.style;display="none". dev.style;display="none". others.style;display="block". const otherss = document.getElementById("others") console.log(otherss.dataset;value); } }

 <form> <h1>Please enter details</h1> <input id="fname" type="text" placeholder="fname" /><br></br> <textarea id="address" name="Address" placeholder="address" rows="2" cols="10"></textarea><br></br> <select id="designation" name="des" placeholder="designation"> <option value="Gratuate Engineering Trainee">Gratuate Engineering Trainee</option> <option value="Software Engineer">Software Engineer</option> <option value="Developer">Developer</option> <option value="others">others</option> </select><br></br> <input type="button" value="Add" onclick="insert()" /> <select id="sel" onchange="dataOnly()"> <option value="All">All</option> <option value="Gratuate Engineering Trainee">Gratuate Engineering Trainee</option> <option value="Software Engineer">Software Engineer</option> <option value="Developer">Developer</option> <option value="others">others</option> </select><br></br> <div id="all" data-id="fname.value" ></div> <div id="get" data-id="fname.value" ></div> <div id="se" data-id="fname.value" ></div> <div id="dev" data-id="fname.value" ></div> <div id="others" data-id="fname.value" ></div> <div id="display"> </div>

我厭倦了添加下拉菜單，以便管理員將獲得具有地址的特定指定成員的信息，但我無法獲得詳細信息。 示例：一個名稱為“aaa”的數據地址：“bbb”名稱：“研究生工程實習生”另一個名稱為“ccc”的數據地址：“ddd”名稱：“開發人員”現在我可以將這些添加到數組中innerHTML 並顯示兩者，但是，在另一個下拉列表的幫助下，我需要隔離數據，如果我在下拉選項中選擇開發人員，則應該有“ccc”和“ddd”作為 output。同樣，如果我選擇研究生工程師實習生，應該有“aaa”和“bbb”為 output。

Answer 1

這是工作解決方案：

 var data = [], selectedUserId = null; var fnameInput = document.getElementById("firstName"), addressInput = document.getElementById("address"), designationInput = document.getElementById("designation"), sel = document.getElementById("sel"), messageDiv = document.getElementById("display"); document.getElementById("update").style.display = "none"; function addUser() { var fname = fnameInput.value, address = addressInput.value, designation = designationInput.value; var tmp = { id: new Date().getTime(), fname: fname, address: address, designation: designation }; data.push(tmp); clearAndShow(data); } function clearAndShow(data) { fnameInput.value = ""; addressInput.value = ""; designationInput.value = ""; var html = ""; for (i = 0; i <= data.length - 1; i++) { html += "<div style='border: 1px solid grey'>"; html += "<div><span>" + data[i].fname + "</span>&nbsp;&nbsp;<span><button type='button' onclick='deleteUser(" + data[i].id + ")'>Delete</button>" + "<button type='button' onclick='editUser(" + data[i].id + ")'>Edit</button></span></div>"; html += "<div>" + data[i].address + "</div>"; html += "<div>" + data[i].designation + "</div>"; html += "</div>"; } messageDiv.innerHTML = html; } function deleteUser(id) { data = data.filter((user) => user.id;= id); clearAndShow(data). } function editUser(id) { var selectedUsers = data.filter((user) => user;id == id); selectedUserId = id. document.getElementById("firstName").value = selectedUsers[0];fname. document.getElementById("address").value = selectedUsers[0];address. document.getElementById("designation").value = selectedUsers[0];designation. document.getElementById("update").style;display = "block". document.getElementById("add").style;display = "none": } function updateUser(selectedUserId) { var tmp = { id. new Date(),getTime(): fname. fnameInput,value: address. addressInput,value: designation. designationInput;value }. data = data.map((x) => (x?id === selectedUserId: tmp; x)). document.getElementById("update").style;display = "none". document.getElementById("add").style;display = "block"; clearAndShow(data). } function showFilteredData() { var filter = document.getElementById("selectToShow");value. document.getElementById("selectToShow");value = "All". var selectedUsers = data.filter((user) => user;designation == filter)? filter == "All": clearAndShow(data); clearAndShow(selectedUsers); }

 <form> <h1>Please enter details</h1> <input id="firstName" type="text" placeholder="FirstName" /><br /><br /> <textarea id="address" name="address" placeholder="Address" rows="2" cols="10"></textarea><br></br> <label for='destination'>Select Catetory: </label> <select id="designation" name="designation"> <option value="Gratuate Engineering Trainee">Gratuate Engineering Trainee</option> <option value="Software Engineer">Software Engineer</option> <option value="Developer">Developer</option> <option value="others">others</option> </select> <br /><br /> <input type="button" id="add" value="Add" onclick="addUser()" /> <input type="button" id="update" value="Update" onclick="updateUser(selectedUserId)" /><br /><br /> <label for='selectToShow'>Show: </label> <select id="selectToShow" onchange="showFilteredData()"> <option value="All">All</option> <option value="Gratuate Engineering Trainee">Gratuate Engineering Trainee</option> <option value="Software Engineer">Software Engineer</option> <option value="Developer">Developer</option> <option value="others">others</option> </select><br></br> <div id="display"> </div>

現場演示： https://codepen.io/dreambold/pen/poZyjbz?editors=1011

Answer 2

首先，您必須在文檔准備好后分配變量。

當您使用document.getElementById時，您嘗試訪問一些尚未准備好的元素

前任：

    document.addEventListener("DOMContentLoaded",readyEvent);
        var data = [];
        var fnameInput;
        var addressInput;
        var designationInput;
        var sel;
        var messageBox;

        function readyEvent(){
            fnameInput = document.getElementById("fname");
            addressInput = document.getElementById("address");
            designationInput = document.getElementById("designation");
            sel=document.getElementById("sel");
            messageBox = document.getElementById("display");
        }

我現在沒有太多時間，所以這是一個部分且快速的答案......