选择多个:如何选择/取消选择(Javascript)

Question

1)我没有Javascript知识。

2)我使用的是select2 (多选)引导程序表单。3)如果我点击相应组的一个选项，我想取消选择组的其他选项。

3.1)例如:如果选了选项值"2“和"6”，然后我点击了选项"1“和"5"，应该会自动取消选择选项"2”和"6“。

谢谢。

​

          <div align = "center" class="form-group">
            <label>Filtros</label>
            <select name ="Filtros" id = "Filtros" class="form-control select2" multiple="multiple" data-placeholder="Selecione os Filtros"
                    style="width: 100%;">

            <optgroup label="IBC">
              <option value="1">IBC_ALL</option>
              <option value="2">IBC_SIM</option>
              <option value="3">IBC_NAO</option>
              <option value="4">IBC_Nao_Mostrar</option>

            <optgroup label="CROT">
              <option value="5">CROT_ALL</option>
              <option value="6">CROT_SIM</option>
              <option value="7">CROT_NAO</option>
              <option value="8">CROT_Nao_Mostrar</option>

            </select>
          </div>

​

Answer 1

它在我身上效果很好。如果您选中不同类别中的多个选项，则会自动取消选择其他类别中的其他选项。

注意:当用户使用SHIFT密钥时，不工作。

<div align = "center" class="form-group">
<label>Filtros</label>
<select name ="Filtros" id = "Filtros" class="form-control select2" multiple="multiple" data-placeholder="Selecione os Filtros"
        style="width: 100%;">

<optgroup label="IBC" parent="1">
  <option value="1" childof="1">IBC_ALL</option>
  <option value="2" childof="1">IBC_SIM</option>
  <option value="3" childof="1">IBC_NAO</option>
  <option value="4" childof="1">IBC_Nao_Mostrar</option>

<optgroup label="CROT" parent="2">
  <option value="5" childof="2">CROT_ALL</option>
  <option value="6" childof="2">CROT_SIM</option>
  <option value="7" childof="2">CROT_NAO</option>
  <option value="8" childof="2">CROT_Nao_Mostrar</option>

</select>
</div>

<script>
var selected = {
    1:[],
    2:[]
}
var last_selected = 1;
document.getElementById('Filtros').addEventListener('click',function(e){
var parent = e.target.getAttribute('childof');

if( e.target.selected )
{
    selected[parent].push(e.target);

  for( var i=0; i < selected[parent].length; i++ )
  {
    var elem = selected[parent][i];

    if(!elem.selected)
      selected[parent].splice(i,1);
  }

  if( parent != last_selected )
  {
    for( var i=0; i < selected[last_selected].length; i++ )
    {
      var elem = selected[last_selected][i];
      elem.selected = false;
    }
  }

  last_selected = parent;
}
});
</script>