私はいくつかのスタッフ名を持っています。各スタッフは異なるグループに属することができます。スタッフ名はN1、N2、N3、グループ名はG1、G2とします。グループと名前を対応付ける効果的なソリューション
どのスタッフがどのグループに所属しているかをウェブページに表示する必要があります（グループ別にソート）。例えば。 G1はN1とN2を含む。
また、各スタッフの所属するグループが何であるかを（別のボタンをクリックしたときに）表示する必要があります。例えば。 N1はG1とG2に属します。
ウェブページでこれを行う有効な方法は何ですか？
私は、値としてキーとgroupsArrayとしてstaffnameでオブジェクトを作成しています。
その他は自明でなければなりません。これは
let staffsArray = ["N1","N2","N3"];
staffs = [{
\t "N1" : ["G1","G2","G3"]
},{
\t "N2" : ["G1"]
},
{
\t "N3" : ["G3"]
},
{
\t "N4" : ["G2","G3"]
}]
window.onload = appendStaffsToDropDown();
function appendStaffsToDropDown() {
\t staffsArray.map((staffName) => {
\t \t let staffNameDiv = document.createElement("option");
\t \t let x = document.createElement("OPTION");
\t x.setAttribute("value", staffName);
\t let t = document.createTextNode(staffName);
\t x.appendChild(t);
\t document.getElementById("staffDropDown").appendChild(x)
\t });
\t displayStaffDetails();
}
function displayStaffDetails() {
\t staffsArray.map((staffName) => {
\t \t staffs.map((staffObject) => {
\t \t \t if(staffObject[staffName] != undefined) {
\t \t \t \t let parentDiv = document.getElementById('staffDetails');
\t \t \t \t let staffNameDiv = document.createElement("div");
\t \t \t \t let staffNameContent = document.createTextNode("staffName :" + staffName);
\t \t \t \t staffNameDiv.appendChild(staffNameContent);
\t \t \t \t parentDiv.appendChild(staffNameDiv)
\t \t \t \t
\t \t \t \t let staffGroupDiv = document.createElement("div");
\t \t \t \t let staffGroupContent = document.createTextNode("StaffGroup :" + staffObject[staffName]);
\t \t \t \t staffGroupDiv.appendChild(staffGroupContent);
\t \t \t \t
\t \t \t \t parentDiv.appendChild(staffGroupDiv)
\t \t \t } \t \t
\t \t }); \t
\t }); \t
}
document.getElementById("staffDropDown").onchange = function() {
\t let staffName = document.getElementById("staffDropDown").value;
\t var filteredDetails = document.getElementById("filteredDetails");
\t while (filteredDetails.firstChild) {
\t filteredDetails.removeChild(filteredDetails.firstChild);
\t }
\t staffs.map((staffObject) => { \t \t \t \t
\t \t if(staffObject[staffName] != undefined) {
\t \t \t let parentDiv = document.getElementById('filteredDetails');
\t \t \t let staffNameDiv = document.createElement("div");
\t \t \t let staffNameContent = document.createTextNode("staffName :" + staffName);
\t \t \t staffNameDiv.appendChild(staffNameContent);
\t \t \t parentDiv.appendChild(staffNameDiv)
\t \t \t
\t \t \t let staffGroupDiv = document.createElement("div");
\t \t \t let staffGroupContent = document.createTextNode("StaffGroup :" + staffObject[staffName]);
\t \t \t staffGroupDiv.appendChild(staffGroupContent);
\t \t \t
\t \t \t parentDiv.appendChild(staffGroupDiv)
\t \t \t document.getElementById("staffDetails").style.display = 'none';
\t \t } \t \t
\t });
}<div id="staffDetails">
</div>
<select id="staffDropDown">
<option>Select Staffs</option>
</select>
<button>
Filter groups
</button>
<div id="filteredDetails">
</div>