Populating Drop down list from selection to label value-CodePudding

I'm having trouble on how can I display data to my third label that comes from the first and second dropdowns. I have two dropdown, firstly when I click my first dropdown the second dropdown will populate list based on the value of my first dropdown and below my code it works fine. The problem is, I want to display value to my <p> or label based on the options click on the second dropdown.

Output on the third label or paragraph either: low,medium,urgent that based of the value from the second dropdown

the problem is how can I implement low,medium,urgent these library to my data and display in the third label or p, Can anyone know this? it's very helpful for me

let data = [{"id":1,"name":"Infimos","parentid":0},
{"id":2,"name":"Computer servicing","parentid":0},
{"id":3,"name":"Software installation","parentid":0},
{"id":4,"name":"Fix errors","parentid":1},
{"id":5,"name":"New feature","parentid":1},
{"id":6,"name":"Add payee","parentid":1},
{"id":7,"name":"Add user","parentid":1},
{"id":8,"name":"System assistance","parentid":1},
{"id":9,"name":"Internet connection problem","parentid":2},
{"id":10,"name":"Computer malfunction","parentid":2},
{"id":11,"name":"Printer connection problem","parentid":2},
{"id":12,"name":"Install microsoft office","parentid":3},
{"id":13,"name":"Printer/scanner Installation","parentid":3},
{"id":14,"name":"Install other applications","parentid":3},
]

function populateList(list, pid) {
  let l = document.getElementById(list);
  l.innerHTML = "";
  let topItem = document.createElement("option");
  topItem.value = 0;
  topItem.text = "Select";
  l.appendChild(topItem); 
  let items = data.filter(item => item.parentid == pid);
  items.forEach(function(item){
    let newItem = document.createElement("option");
    newItem.value = item.id;
    newItem.text = item.name;
    l.appendChild(newItem);
  })
}

function updateList(selList, thisList) {
  if (thisList.value != 0) {
    populateList(selList, Number(thisList.value));
  } else {
    let s = document.getElementById(selList);
    s.value = 0;
    triggerEvent(s, "onchange");
    let sCopy = s.cloneNode(false);
    let p = s.parentNode;
    p.replaceChild(sCopy, s);
  }
}
function triggerEvent(e, trigger)
{
    if ((e[trigger] || false) && typeof e[trigger] == 'function')
    {
        e[trigger](e);
    }
}

function loadCat1() {
  populateList("cat1", 0);
}

window.onload = loadCat1;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Category 1 <select  id="cat1" name="cat1" onchange="updateList('cat2', this);">
   <option></option>
</select>
<br><br>

Category 2<select  required="" aria-label="select example" id="cat2" name="cat2" onchange="updateList('resultData', this);">
   <option></option>
 </select>
 
 <br><br>
Result must low or medium or urgent : <p id="resultData"></p>

CodePudding user response：

One way is to stored the urgency value in data array

if no item have a parent id equal to the current id (if you are on the last level of your data structure) you just have to recover and display the urgency column

l.innerText = item.urgency;

let data = [{"id":1,"name":"Infimos","parentid":0, "urgency": "low"},
{"id":2,"name":"Computer servicing","parentid":0, "urgency": "medium"},
{"id":3,"name":"Software installation","parentid":0, "urgency": "urgent"},
{"id":4,"name":"Fix errors","parentid":1, "urgency": "low"},
{"id":5,"name":"New feature","parentid":1, "urgency": "medium"},
{"id":6,"name":"Add payee","parentid":1, "urgency": "urgent"},
{"id":7,"name":"Add user","parentid":1, "urgency": "low"},
{"id":8,"name":"System assistance","parentid":1, "urgency": "medium"},
{"id":9,"name":"Internet connection problem","parentid":2, "urgency": "urgent"},
{"id":10,"name":"Computer malfunction","parentid":2, "urgency": "low"},
{"id":11,"name":"Printer connection problem","parentid":2, "urgency": "medium"},
{"id":12,"name":"Install microsoft office","parentid":3, "urgency": "urgent"},
{"id":13,"name":"Printer/scanner Installation","parentid":3, "urgency": "low"},
{"id":14,"name":"Install other applications","parentid":3, "urgency": "low"},
]

function populateList(list, pid) {
  let l = document.getElementById(list);
  l.innerHTML = "";
  let topItem = document.createElement("option");
  topItem.value = 0;
  topItem.text = "Select";
  l.appendChild(topItem); 
  let items = data.filter(item => item.parentid == pid);
  items.forEach(function(item){
    let newItem = document.createElement("option");
    newItem.value = item.id;
    newItem.text = item.name;
    l.appendChild(newItem);
  });
  if (!items.length) {
    let item = data.filter(item => item.id == pid)[0];
    l.innerText = item.urgency;
  }
}

function updateList(selList, thisList) {
  if (thisList.value != 0) {
    populateList(selList, Number(thisList.value));
  } else {
    let s = document.getElementById(selList);
    s.value = 0;
    triggerEvent(s, "onchange");
    let sCopy = s.cloneNode(false);
    let p = s.parentNode;
    p.replaceChild(sCopy, s);
  }
}
function triggerEvent(e, trigger)
{
    if ((e[trigger] || false) && typeof e[trigger] == 'function')
    {
        e[trigger](e);
    }
}

function loadCat1() {
  populateList("cat1", 0);
}

window.onload = loadCat1;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Category 1 <select  id="cat1" name="cat1" onchange="updateList('cat2', this);">
   <option></option>
</select>
<br><br>

Category 2<select  required="" aria-label="select example" id="cat2" name="cat2" onchange="updateList('resultData', this);">
   <option></option>
 </select>
 
 <br><br>
Result must low or medium or urgent : <p id="resultData"></p>