Add -remove an option to dropdown menu

Question

I am trying to write to a function. Whn I check a checkbox, the items belongs to that checkbox item comes to dropdown menu, and when I uncheck it, it goes away from the dropdpwn. I can add, but cannot remove when I uncheck the checkbox.Here is my code.

var items = [
  "#1001#item1#10.5#10#1#direc1#",
  "#1002#item2#20.5#10#2#direc2#",
  "#1003#item3#20.5#10#3#director3#",
];
    function checkboxChange(ev) {
        var count = items.length;
        var select = document.getElementById('formsec');
        for (var i = 0; i < count; i++){
            if (ev.value=="1001" &&ev.checked  ) {
                var item = items[i];
                var currentitem = item.split('#');
                if (currentitem[5]=="1" ) {
                    var opt = document.createElement('option');
                    opt.value = currentitem[1];
                    opt.innerHTML = currentitem[2];
                    select.appendChild(opt);
                }

HTML

<td>
    Choose the item: </br>          
    <input type="checkbox" id="category1" name="choice" value="1001" onchange="checkboxChange(this)" />Category1<br />
    <input type="checkbox" id="category2" name="choice" value="1002" onchange="checkboxChange(this)" />Category2<br />
    <input type="checkbox" id="category3" name="choice" value="1003" onchange="checkboxChange(this)" />Category3<br />
</td>

Please check your `console log` and post a code that compiles. — Matus Dubrava, Apr 16 '18 at 11:58

score 2 · Accepted Answer · answered Apr 16 '18 at 12:20

Working example using querySelector and select.remove().

Only works with Category 1 because OP conditions:

if (ev.value == "1001")
if (currentitem[5] == "1")

var items = [
  "#1001#item1#10.5#10#1#direc1#",
  "#1002#item2#20.5#10#2#direc2#",
  "#1003#item3#20.5#10#3#director3#",
];

function checkboxChange(ev) {
  var count = items.length;
  var select = document.getElementById('formsec');
  for (var i = 0; i < count; i++) {
    if (ev.value == "1001") {
      var item = items[i];
      var currentitem = item.split('#');
      if (currentitem[5] == "1") {
        if (ev.checked) {
          var opt = document.createElement('option');
          opt.value = currentitem[1];
          opt.innerHTML = currentitem[2];
          select.appendChild(opt);
        } else {
          var opt = document.querySelector("option[value='" + currentitem[1] + "']");
          select.remove(opt);
        }
      }
    }
  }
}

<select id="formsec"></select>
<td>
  Choose the item: <br />
  <input type="checkbox" id="category1" name="choice" value="1001" onchange="checkboxChange(this)" /><label for="category1">Category1</label><br />
  <input type="checkbox" id="category2" name="choice" value="1002" onchange="checkboxChange(this)" /><label for="category2">Category2</label><br />
  <input type="checkbox" id="category3" name="choice" value="1003" onchange="checkboxChange(this)" /><label for="category3">Category3</label><br />
</td>

score 1 · Answer 2 · answered Apr 17 '18 at 04:07

This may help you. I implement this without an array. Use an associated label with each checkbox.

function checkboxChange(ev) {
$('#formsec').html("");
$('input[type=checkbox]').each(function () {
  
   var chk = (this.checked ? $(this).val() : "");   
   if(chk){
    $('#formsec').append('<option value="'+chk+'" selected="selected">'+$("label[for='"+this.id+"']").text()+'</option>');
   }
   
 });
        
      
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    Choose the item:<br />          
    <input type="checkbox" id="category1" name="choice" value="1001" onchange="checkboxChange(this)" />
    <label for="category1">Category1</label>
    <br />
    <input type="checkbox" id="category2" name="choice" value="1002" onchange="checkboxChange(this)" />
    <label for="category2">Category2</label>
    <br />
    <input type="checkbox" id="category3" name="choice" value="1003" onchange="checkboxChange(this)" />
    <label for="category3">Category3</label>
</div>
<select id="formsec"></select>

score 0 · Answer 3 · answered Apr 16 '18 at 12:28

Instead setting an onChange handler in html I would recommend binding an input-handler and rebuild the selectbox each time, even on document load like

var items = [
  "#1001#item1#10.5#10#1#direc1#",
  "#1002#item2#20.5#10#2#direc2#",
  "#1003#item3#20.5#10#3#director3#"
];

function rebuild() {
  var select = document.getElementById('formsec');
  select.innerHTML = "";

  [].forEach.call(document.querySelectorAll("input[type=checkbox]"), (el) => {
    if (el.checked) {
      var opt = document.createElement('option');
      var currentitem = items.find(
        (item) => item.startsWith("#" + el.value)
      ).split("#");
      opt.value = currentitem[1];
      opt.innerHTML = currentitem[2];
      select.appendChild(opt);
    }

  });
}

[].forEach.call(document.querySelectorAll("input[type=checkbox]"), (el) => {
  el.addEventListener("input", rebuild);
});

rebuild();

Choose the item:<br>
<input type="checkbox" id="category1" name="choice" value="1001">Category1<br>
<input type="checkbox" id="category2" name="choice" value="1002" checked>Category2<br>
<input type="checkbox" id="category3" name="choice" value="1003">Category3<br>

<select id="formsec"></select>

Add -remove an option to dropdown menu

3 Answers3