1)I have no Javascript knowledge.
2)I am using a select2 (multiple select) bootstrap form. 3)I want to deselect the other options of a group if I click in one option of the corresponding group.
3.1)eg: If option values "2" and "6" are selected and then I click options "1" and "5", it should automatically deselects options "2" and "6".
Thanks.
<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>
It works fine on me. If you check multiple choices from different categories, it automatically deselecting another choices from another category.
Note: Not working when user use SHIFT
key.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.