I have three select boxes I used select2 plugin, I want
1- when select-1 is empty hide select-2 and select-3
2- when select-1 value is 1 show select-1
3- when select-1 value is 2 show select-2
4- when select-1 value is contains 1 and 2 show both select-2 and select-3
5- when i select only select-2 or select-3 then i decide to deselect it directly hide the select-2 or select-3 box
<select name="select-1" id="box1" multiple>
<option value="1" >Select 1</option>
<option value="2" >Select 2</option>
</select>
<select name="select-2" id="box2" multiple></select>
<select name="select-2" id="box3" multiple></select>
I try this jquery code below but don't work with all 5 cases please help me and correct code to me
var categoryFlag = false;
var tagFlag = false;
$('#box1').change(function() {
$(this).find('option:selected').each(function() {
if($(this).attr('value') == '1') {
categoryFlag = true;
} else if($(this).attr('value') == '2') {
tagFlag = true;
}
});
if(categoryFlag && tagFlag) {
$('#box2').show();
$('#box3').show();
} else if(categoryFlag && !tagFlag) {
$('#box2').show();
$('#box3').hide();
} else if(!categoryFlag && tagFlag) {
$('#box2').hide();
$('#box3').show();
} else {
$('#box2').hide();
$('#box3').hide();
}
});