Change dropdown menu through input checkbox

Question

Change dropdown menu through input checkbox

Navigation

#1 by (0 votes)

1

I'm trying to create a dynamic dropdown menu that can display its contents as checkbox is checked.

<!DOCTYPE html>
<html>
<body>
<div id="checkbox">
<label><input type="checkb" value="produto"/>Produto</label><br/>
<label><input type="checkb" value="servico"/>Servicos</label><br/>
<label><input type="checkb" value="outros"/>Outros</label><br/>
</div>

<select name="listaPSO" id="LISTAPSO">
<option value="">--- Select ---</option>
<option value="">----Produto----</option>
<option value="Produto">Celular</option>
<option value="Produto">Tablet</option>
<option value="Produto">TV</option>
<option value="">----Servico----</option>
<option value="Servico">Troca</option>
<option value="Servico">Compra</option>
<option value="">----Outros----</option>
<option value="Outros">Outros A</option>
<option value="Outros">Outros B</option>
</select>

As I mark checkbox, I would like to be able to show in the dropdown menu only the related content, when milestone Product would have to show only the list of products in the menu, as well as service and others, I do not know if this form I am doing is ideal , the problem I'm having is that by checking and unchecking the content does not always mark correctly and unchecking all it gets last list tag.

<script>
$('#checkb').change(function () {
var coffee = document.querySelectorAll('input[type="checkb"]:checked');
var x = document.getElementById('listaPSO');
var options = x.getElementsByTagName('option');

for (i = 0; i < coffee.length; i++) {   //Pega os valores checkbox
 if (coffee[i].checked) {
  if (coffee[i].value == 'produto') { 
   $("#productList").children('option[value="produto"]').show();
   $("#productList").children('option[value="servico"]').hide();
   $("#productList").children('option[value="outros"]').hide();
  }
   if (coffee[i].value == 'servico') { 
    $("#productList").children('option[value="produto"]').hide();
    $("#productList").children('option[value="servico"]').show();
    $("#productList").children('option[value="outros"]').hide();
  }
   if (coffee[i].value == 'outros') {  
    $("#productList").children('option[value="produto"]').hide();
    $("#productList").children('option[value="servico"]').hide();
    $("#productList").children('option[value="Non"]').show();
    } else { 
     $("#productList").children('option[value="produto"]').show();
     $("#productList").children('option[value="servico"]').show();
     $("#productList").children('option[value="outros"]').show();
    }
   } 
  }
});
</script>

javascript html jquery

asked by anonymous 20.09.2017 / 07:12

1 answer

Deleting Duplicate Values in SQL I can not install scipy. is showing this error [closed]

score 0 · Answer 1

If you can change the HTML we can add more information to these option that facilitates the task.

$('#checkbox').change(function() {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
  var options = document.querySelectorAll('#LISTAPSO option');

  var filtros = [].reduce.call(checkboxes, function(filters, el) {
    if (el.checked) return filters.concat(el.value);
    return filters;
  }, ['vazio']);

  for (i = 0; i < options.length; i++) {
    var option = options[i];
    option.style.display = filtros.includes(option.getAttribute('data-group')) ? 'block' : 'none';
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="checkbox">
  <label><input type="checkbox" value="produto"/>Produto</label><br/>
  <label><input type="checkbox" value="servico"/>Servicos</label><br/>
  <label><input type="checkbox" value="outros"/>Outros</label><br/>
</div>

<select name="listaPSO" id="LISTAPSO">
  <option data-group="vazio" value="">--- Select ---</option>
  <option data-group="produto" value="celular">Celular</option>
  <option data-group="produto" value="tablet">Tablet</option>
  <option data-group="produto" value="tv">TV</option>
  <option data-group="servico" value="troca">Troca</option>
  <option data-group="servico" value="compra">Compra</option>
  <option data-group="outros" value="outros a">Outros A</option>
  <option data-group="outros" value="outros b">Outros B</option>
</select>