How to add and removed checkboxes from a dropdown list dynamically

Question

I am trying to create a dropdown list with checkboxes, where the values in the dropdown are dependent on outer checkboxes.

This is what i currently have.

http://jsfiddle.net/m1hawe54/

HTML

<div class="region-checkboxes">
  <input type="checkbox" name="na" value="NA" />
  <span style="width:25px;display:inline-block;">NA</span>
  <input type='checkbox' name="eu" value="EU" />
  <span style="width:25px;display:inline-block;">EU</span>
  <input type='checkbox' name="apac" value="APAC" />
  <span style="width:40px;display:inline-block;">APAC</span>
  <input type='checkbox' name="cn" value="CN"/>
  <span style="width:25px;display:inline-block;">CN</span>

JS

  var allvalue = []
  var checkboxes = document.querySelectorAll('.region-checkboxes input');

  checkboxes.forEach(function(item) {
  item.addEventListener('click', onChangeCheckbox);
  });
  function onChangeCheckbox (checkbox) {
  console.log(checkbox.currentTarget.value);
        if (checkbox.currentTarget.checked) {
            allvalue.push(checkbox.currentTarget.value);
            allvalue.sort();
        }
        else {
            var index = allvalue.indexOf(checkbox.currentTarget.value);
            if(index > -1){
            allvalue.splice(index,1);
            }
        }
    }

What I am trying to do is based on the checkboxes selected, it will populate a checkbox dropdown list with other values. In this example, it will populate sub-regions based on the regions you select.

So the dropdown will populate ["NA","LA"] if you select the "NA" check box, ["WEU", "EEU", "RU"] if you select the "EU" check box, if you select both, it will populate the drop list with both arrays. Here is what I have in mind.

http://jsfiddle.net/evfnLn0x/712/

So now the problem is. I do not know how to set up my code so it does dynamically. I also need the dropdown checkbox list to remove subregions when the outer checkbox gets unselected. I've been struggling all night with this.

Sandeep Nayak · Answer 1 · 2016-08-23T05:46:33.310

I would do something like below:

var allvalue = []
var checkboxes = document.querySelectorAll('.region-checkboxes input');

for (var k = 0; k < checkboxes.length; k++) {
  checkboxes[k].addEventListener('click', onChangeCheckbox);
};

// Does not work in Firefox
//checkboxes.forEach(function(item) {
//item.addEventListener('click', onChangeCheckbox);
//});

function onChangeCheckbox(checkbox) {
  console.log(checkbox.currentTarget.value);
  if (checkbox.currentTarget.checked) {
    allvalue.push(checkbox.currentTarget.value);
    allvalue.sort();
  } else {
    var index = allvalue.indexOf(checkbox.currentTarget.value);
    if (index > -1) {
      allvalue.splice(index, 1);
    }
  }
  renderDropdown();
}

function renderDropdown() {
  // will be called on each click on any checkboxes
  var div = document.querySelector("#dropdown")
  var select = document.createElement("select");
  for (var i = 0; i < allvalue.length; i++) {
    // get subregions from the below dropdown object mapping
    var subRegion = dropdown[allvalue[i]];
    if (subRegion && subRegion.length) {
      for (var j = 0; j < subRegion.length; j++) {
        var option = document.createElement("option");
        option.value = subRegion[j];
        option.selected = "";
        option.innerHTML = subRegion[j];
        select.appendChild(option);
      }
      div.innerHTML = "";
      div.appendChild(select);
    }

  }

}

var dropdown = {
  "NA": ["NA", "LA"],
  "EU": ["WEU", "EEU", "RU"],
  "APAC": ["KR", "TW", "SG", "ANZ", "JP", "CN"]
}

.dropdown-check-list {
  display: inline-block;
}
.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}
.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}
.dropdown-check-list ul.items {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}
.dropdown-check-list ul.items li {
  list-style: none;
}

<body>

  <div class="region-checkboxes">
    <input type="checkbox" name="na" value="NA" />
    <span style="width:25px;display:inline-block;">NA</span>
    <input type='checkbox' name="eu" value="EU" />
    <span style="width:25px;display:inline-block;">EU</span>
    <input type='checkbox' name="apac" value="APAC" />
    <span style="width:40px;display:inline-block;">APAC</span>
    <input type='checkbox' name="cn" value="CN" />
    <span style="width:25px;display:inline-block;">CN</span>
  </div>
  <div id="dropdown"></div>
</body>

Updated

Working Fiddle

Did you run the code snippet above? It does show dropdown when you click on the checkbox! — Sandeep Nayak, Aug 23 '16 at 05:33
I am getting this error: { "message": "TypeError: checkboxes.forEach is not a function", "filename": "http://stacksnippets.net/js", "lineno": 66, "colno": 1 } — user3348557, Aug 23 '16 at 05:35
Ignore the CN checkbox for now..try clicking others. Added snapshot in the answer as well — Sandeep Nayak, Aug 23 '16 at 05:38
@user3348557: Updated code..Now it should work!. Please read comments in code. — Sandeep Nayak, Aug 23 '16 at 05:47
one more question, is there a way i can make the dropdown items to be a checkbox? I am trying to make the dropdown a multiselect checkbox — user3348557, Aug 23 '16 at 06:05
Take a look at [this](http://stackoverflow.com/questions/19206919/how-to-create-checkbox-inside-dropdown) answer. Working [Fiddle](http://jsfiddle.net/evfnLn0x/) here — Sandeep Nayak, Aug 23 '16 at 06:07

How to add and removed checkboxes from a dropdown list dynamically

1 Answers1