user3348557 user3348557 - 3 months ago 8
Javascript Question

How to add and removed checkboxes from a dropdown list dynamically

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.

Answer

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

enter image description here