Show hide fields based on select/deselect options using select2

18 views
Skip to first unread message

SAFEEN NAMIQ SALEEM

unread,
Nov 28, 2016, 3:07:39 PM11/28/16
to select2

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();
    }
});


Reply all
Reply to author
Forward
0 new messages