Append and Populate dropdown list multiple javascript

Question

Is this possbile to transpose this into multiple value just like in the image. Whenever I click another item it will append to another list in sub-region depends on region list data for example in Region, I select first region which is Agusan Del norte then it will pop up those list in sub-region under agusan del norte, then when I select another item in Region like Agusan Del Sur it will append list to sub-region. It is possible? It would be great if anybody could figure out where I am doing something wrong. thank you so much in advance.

Reference: link

<select class="select2-icons form-control" name = "list1"  id="list1" multiple="multiple" onchange="updateList('list2', this);"></select>

let data = [{"id":1,"name":"USA","parentid":0},
{"id":2,"name":"Japan","parentid":0},
{"id":3,"name":"Europe","parentid":0},
{"id":4,"name":"California","parentid":1},
{"id":5,"name":"Oklahoma","parentid":1},
{"id":6,"name":"Arizona","parentid":1},
{"id":7,"name":"Kantô","parentid":2},
{"id":8,"name":"Kansai","parentid":2},
{"id":9,"name":"Chügoku","parentid":2},
{"id":10,"name":"France","parentid":3},
{"id":11,"name":"Deutschland","parentid":3},
{"id":12,"name":"Espana","parentid":3},
{"id":13,"name":"Sacramento","parentid":4},
{"id":14,"name":"Los Angeles","parentid":4},
{"id":15,"name":"San Diego","parentid":4},
{"id":16,"name":"Tulsa","parentid":5},
{"id":17,"name":"Oklahoma City","parentid":5},
{"id":18,"name":"Lawton","parentid":5},
{"id":19,"name":"Phoenix","parentid":6},
{"id":20,"name":"Flagstaff","parentid":6},
{"id":21,"name":"Tucson","parentid":6},
{"id":21,"name":"Tokyo","parentid":7},
{"id":22,"name":"Chiba","parentid":7},
{"id":23,"name":"Tochigi","parentid":7},
{"id":24,"name":"Kyoto","parentid":8},
{"id":25,"name":"Osaka","parentid":8},
{"id":26,"name":"Nara","parentid":8},
{"id":27,"name":"Tottori","parentid":9},
{"id":28,"name":"Hirochima","parentid":9},
{"id":29,"name":"Okayama","parentid":9},
{"id":30,"name":"Quimper","parentid":10},
{"id":31,"name":"Toulouse","parentid":10},
{"id":32,"name":"Nancy","parentid":10},
{"id":33,"name":"Dusseldorf","parentid":11},
{"id":34,"name":"Leipzig","parentid":11},
{"id":35,"name":"Munchen","parentid":11},
{"id":36,"name":"Barcelona","parentid":12},
{"id":37,"name":"Sevilla","parentid":12},
{"id":38,"name":"Guernica","parentid":12}]

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 loadList1() {
  populateList("list1", 0);
}

window.onload = loadList1;

select {width:150px;}

Region: <select id="list1" onchange="updateList('list2', this);"></select>
Sub-region:<select id="list2" onchange="updateList('list3', this);"></select>>
Location:<select id="list3"></select>

ramlalsharma1994 · Accepted Answer · 2021-01-25 04:01:07Z

1

    let data = [{"id":1,"name":"USA","parentid":0},
    {"id":2,"name":"Japan","parentid":0},
    {"id":3,"name":"Europe","parentid":0},
    {"id":4,"name":"California","parentid":1},
    {"id":5,"name":"Oklahoma","parentid":1},
    {"id":6,"name":"Arizona","parentid":1},
    {"id":7,"name":"Kantô","parentid":2},
    {"id":8,"name":"Kansai","parentid":2},
    {"id":9,"name":"Chügoku","parentid":2},
    {"id":10,"name":"France","parentid":3},
    {"id":11,"name":"Deutschland","parentid":3},
    {"id":12,"name":"Espana","parentid":3},
    {"id":13,"name":"Sacramento","parentid":4},
    {"id":14,"name":"Los Angeles","parentid":4},
    {"id":15,"name":"San Diego","parentid":4},
    {"id":16,"name":"Tulsa","parentid":5},
    {"id":17,"name":"Oklahoma City","parentid":5},
    {"id":18,"name":"Lawton","parentid":5},
    {"id":19,"name":"Phoenix","parentid":6},
    {"id":20,"name":"Flagstaff","parentid":6},
    {"id":21,"name":"Tucson","parentid":6},
    {"id":21,"name":"Tokyo","parentid":7},
    {"id":22,"name":"Chiba","parentid":7},
    {"id":23,"name":"Tochigi","parentid":7},
    {"id":24,"name":"Kyoto","parentid":8},
    {"id":25,"name":"Osaka","parentid":8},
    {"id":26,"name":"Nara","parentid":8},
    {"id":27,"name":"Tottori","parentid":9},
    {"id":28,"name":"Hirochima","parentid":9},
    {"id":29,"name":"Okayama","parentid":9},
    {"id":30,"name":"Quimper","parentid":10},
    {"id":31,"name":"Toulouse","parentid":10},
    {"id":32,"name":"Nancy","parentid":10},
    {"id":33,"name":"Dusseldorf","parentid":11},
    {"id":34,"name":"Leipzig","parentid":11},
    {"id":35,"name":"Munchen","parentid":11},
    {"id":36,"name":"Barcelona","parentid":12},
    {"id":37,"name":"Sevilla","parentid":12},
    {"id":38,"name":"Guernica","parentid":12}]

    function populateList(list, pids) {
      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 =>  pids.includes(item.parentid));
      items.forEach(function(item){
        let newItem = document.createElement("option");
        newItem.value = item.id;
        newItem.text = item.name;
        l.appendChild(newItem);
      })
    }

    function updateList(selList, thisList) {
        let values = [];
        for(let i=0;i<thisList.selectedOptions.length; i++) values.push(parseInt(thisList.selectedOptions[i].value))
      if (values.length>0 && values[0] != 0) {
        populateList(selList, values);
      } 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 loadList1() {
      populateList("list1", [0]);
    }

    window.onload = loadList1;

select {width:150px;}

    Region: <select id="list1" onchange="updateList('list2', this);" multiple="multiple"></select>
    Sub-region:<select id="list2" onchange="updateList('list3', this);" multiple="multiple"></select>
    Location:<select id="list3"></select>

answered Jan 25, 2021 at 4:01

ramlalsharma1994

1685 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Marie Loise Over a year ago

I appreciate your response but is there any way to append data whenever I select more than one data? for example I select two countries which is USA and Japan then the sub region should consist of data under USA AND japan it is possible? badly need help

ramlalsharma1994 Over a year ago

yes, very simple. while appending data in the list, i.e creating option tag create a optgroup tag and then append data in that

Marie Loise Over a year ago

Thanks it helps me a lot , The only problem for me now is to save this when reloads in localStorage

ramlalsharma1994 Over a year ago

please explain your issue

Marie Loise Over a year ago

thanks for your response ,Til now I'm trying to retain the selected data after I click the button, the function of the button was to reload page. the problem is when I done clicking the button using LocalStorage the previous selected multiple fields should retain, Till now I can't sholve this issue , just need help,

codewario · Accepted Answer · 2022-05-20 18:20:00Z

This is what you want:

    let data = [{"id":1,"name":"USA","parentid":0},
    {"id":2,"name":"Japan","parentid":0},
    {"id":3,"name":"Europe","parentid":0},
    {"id":4,"name":"California","parentid":1},
    {"id":5,"name":"Oklahoma","parentid":1},
    {"id":6,"name":"Arizona","parentid":1},
    {"id":7,"name":"Kantô","parentid":2},
    {"id":8,"name":"Kansai","parentid":2},
    {"id":9,"name":"Chügoku","parentid":2},
    {"id":10,"name":"France","parentid":3},
    {"id":11,"name":"Deutschland","parentid":3},
    {"id":12,"name":"Espana","parentid":3},
    {"id":13,"name":"Sacramento","parentid":4},
    {"id":14,"name":"Los Angeles","parentid":4},
    {"id":15,"name":"San Diego","parentid":4},
    {"id":16,"name":"Tulsa","parentid":5},
    {"id":17,"name":"Oklahoma City","parentid":5},
    {"id":18,"name":"Lawton","parentid":5},
    {"id":19,"name":"Phoenix","parentid":6},
    {"id":20,"name":"Flagstaff","parentid":6},
    {"id":21,"name":"Tucson","parentid":6},
    {"id":21,"name":"Tokyo","parentid":7},
    {"id":22,"name":"Chiba","parentid":7},
    {"id":23,"name":"Tochigi","parentid":7},
    {"id":24,"name":"Kyoto","parentid":8},
    {"id":25,"name":"Osaka","parentid":8},
    {"id":26,"name":"Nara","parentid":8},
    {"id":27,"name":"Tottori","parentid":9},
    {"id":28,"name":"Hirochima","parentid":9},
    {"id":29,"name":"Okayama","parentid":9},
    {"id":30,"name":"Quimper","parentid":10},
    {"id":31,"name":"Toulouse","parentid":10},
    {"id":32,"name":"Nancy","parentid":10},
    {"id":33,"name":"Dusseldorf","parentid":11},
    {"id":34,"name":"Leipzig","parentid":11},
    {"id":35,"name":"Munchen","parentid":11},
    {"id":36,"name":"Barcelona","parentid":12},
    {"id":37,"name":"Sevilla","parentid":12},
    {"id":38,"name":"Guernica","parentid":12}]

    function populateList(list, props) {
        if(props[0].value != -1){
let l = document.getElementById(list);
          l.innerHTML = "";
          let topItem = document.createElement("option");
          topItem.value = -1;
          topItem.text = "--Select--";
          l.appendChild(topItem); 

          for(let i=0; i< props.length; i++){
            let newOptGroup = document.createElement("optgroup");
            let item = props[i];

            let items = data.filter(it =>  it.parentid == item.value);
            items.forEach(function(it){
                let newItem = document.createElement("option");
                newItem.value = it.id;
                newItem.text = it.name;
                if(props.length>0 && props[0].value !=0){
                    newOptGroup.label= item.key
                    newOptGroup.appendChild(newItem)
                }
                else l.appendChild(newItem);
            })

            if(props.length>0 && props[0].value !=0 && props[0].value !=-1){
                l.appendChild(newOptGroup)
            }
          }
        }
          

      
    }

    function updateList(selList, thisList) {
        let values = [];
        for(let i=0;i<thisList.selectedOptions.length; i++) values.push({
            key: thisList.selectedOptions[i].label,
            value: parseInt(thisList.selectedOptions[i].value)
        })

      if (values.length>0 && values[0] != 0) {
        populateList(selList, values);
      } 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 loadList1() {
      populateList("list1", [{key: '', value: 0}]);
    }

    window.onload = loadList1;

select {width:150px;}

    Region: <select id="list1" onchange="updateList('list2', this);" multiple="multiple"></select>
    Sub-region:<select id="list2" onchange="updateList('list3', this);" multiple="multiple"></select>
    Location:<select id="list3"></select>

Collectives™ on Stack Overflow

Append and Populate dropdown list multiple javascript

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related