使用组

Question

我有一些员工姓名。每个员工可以分成不同的组。说员工姓名是N1，N2和N3，组名是G1和G2。

我需要在网页中显示员工属于哪个组（按组排序）。例如。 G1包含N1和N2。

此外，我需要为每个员工显示（当点击另一个按钮时）他们所属的组是什么。例如。 N1属于G1和G2。

在网页中执行此操作的有效方法是什么？

Answer 1

我创建了一个对象，其中staffname为key，groupsArray为value;

其他人必须是不言自明的;希望这有帮助

＆＃13;

＆＃13;

let staffsArray = ["N1","N2","N3"];

staffs = [{
	"N1" : ["G1","G2","G3"]
},{
	"N2" : ["G1"]
},
{
	"N3" : ["G3"]
},
{
	"N4" : ["G2","G3"]
}]

window.onload =  appendStaffsToDropDown();

function appendStaffsToDropDown() {
	staffsArray.map((staffName) => {
		let staffNameDiv = document.createElement("option"); 
		let x = document.createElement("OPTION");
    	x.setAttribute("value", staffName);
	    let t = document.createTextNode(staffName);
	    x.appendChild(t);
    	document.getElementById("staffDropDown").appendChild(x)
	});
	displayStaffDetails();
}


function displayStaffDetails() {
	staffsArray.map((staffName) => {
		staffs.map((staffObject) => {
			if(staffObject[staffName] != undefined) {
				let parentDiv = document.getElementById('staffDetails');

				let staffNameDiv = document.createElement("div"); 
				let staffNameContent = document.createTextNode("staffName :" + staffName); 
				staffNameDiv.appendChild(staffNameContent);
				parentDiv.appendChild(staffNameDiv)
				
				let staffGroupDiv = document.createElement("div"); 
				let staffGroupContent = document.createTextNode("StaffGroup :" + staffObject[staffName]); 
				staffGroupDiv.appendChild(staffGroupContent);
				
				parentDiv.appendChild(staffGroupDiv)
			}		
		});	
	});	
}


document.getElementById("staffDropDown").onchange = function () {
	let staffName = document.getElementById("staffDropDown").value;

	var filteredDetails = document.getElementById("filteredDetails");
	while (filteredDetails.firstChild) {
	    filteredDetails.removeChild(filteredDetails.firstChild);
	}

	staffs.map((staffObject) => {				
		if(staffObject[staffName] != undefined) {
			let parentDiv = document.getElementById('filteredDetails');

			let staffNameDiv = document.createElement("div"); 
			let staffNameContent = document.createTextNode("staffName :" + staffName); 
			staffNameDiv.appendChild(staffNameContent);
			parentDiv.appendChild(staffNameDiv)
			
			let staffGroupDiv = document.createElement("div"); 
			let staffGroupContent = document.createTextNode("StaffGroup :" + staffObject[staffName]); 
			staffGroupDiv.appendChild(staffGroupContent);
			
			parentDiv.appendChild(staffGroupDiv)

			document.getElementById("staffDetails").style.display = 'none';
		}		
	});
}

＆＃13;

<div id="staffDetails">
</div>

<select id="staffDropDown">
<option>Select Staffs</option>
</select>

<button>
Filter groups
</button>

<div id="filteredDetails">
</div>

＆＃13;

＆＃13;

＆＃13;