Change dropdown menu via input checkbox

Asked

Viewed 557 times

2

I’m trying to create a dynamic dropdown menu that can show your content 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, the problem I’m having is that when you mark and uncheck the content you don’t always mark correctly and when you uncheck everyone you get the latest checklist.

<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 jquery html
  • 1

    You can change that HTML or you don’t have access to it?

  • I see no problem in changing the HTML, what I am looking for is a solution using checkbox and Dropbox.

1 answer

2

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>
<div id="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>

  • 1

    Thanks Sergio, your Solution Works just fine!

  • @bernlt great! If you want you can mark reply as accepted

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.