JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://silviomoreto.github.io/bootstrap-select/stylesheets/bootstrap-select.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="http://silviomoreto.github.io/bootstrap-select/javascripts/bootstrap-select.js"></script>
<select id="deptID" class="selectpicker" onchange="change_in_year()" multiple>
<option id="0" value="0" selected="selected" >All</option>
<option id="2001" value="2001" disabled="disabled" >2001</option>
<option id="2002" value="2002" disabled="disabled" >2002</option>
<option id="2003" value="2003" disabled="disabled" >2003</option>
<option id="2004" value="2004" disabled="disabled" >2004</option>
<option id="2005" value="2005" disabled="disabled" >2005</option>
</select>
<p>
<button type="button" onclick="modifications();">Modify</button>
</p>
JavaScript
$(".selectpicker").selectpicker();
function change_in_year()
{
var error = 0;
var yearSelect = new Array();
i=0;
$("#years option:selected").each(function(){
yearSelect[i] = $(this).val();
i++;
});
var deptID = new Array();
i=0;
$("#deptID option:selected").each(function(){
deptID[i] = $(this).val();
i++;
});
var dep = new Array();
i=0;
$("#deptID option").each(function(){
dep[i] = $(this).val();
i++;
});
//alert(deptID);
if( (deptID[0] == 0) )
{
//alert("HAI 1");
dep.forEach(function(entry) {
if(entry != "0")
{
$('#'+entry).prop('disabled',true);
$('#'+entry).prop('selected',false);
}
});
$('#deptID').selectpicker('render');
}
else if( !deptID[0] )
{
//alert("HAI 2");
dep.forEach(function(entry) {
$('#'+entry).prop('disabled',false);
});
$('#deptID').selectpicker('render');
}
else
{
/*alert("HAI 3"); */
dep.forEach(function(entry) {
$('#'+entry).prop('disabled',false);
});
$('#deptID').selectpicker('render');
}
}