Weird behavior in "change" event

Question

I have 2 select tags, where based on the value selected in first select I'm show/hide the option in 2nd select tag which is working perfectly. However today I noticed a weird behavior.

enter image description here

When I tried to change the option in 2nd select using keyboard down arrow, it is still showing the hidden option. Really confused. Please share your thoughts.

Here is the fiddle, where you can reproduce the above bug as I mentioned in the picture.

JS:

$('#AboveOrBelow').on('change', function(){
    if($(this).val() === '1') {
        $('#InitialLeakSource option[data-aob=Above]').show();
        $('#InitialLeakSource option[data-aob=Below]').hide();
    }
    else if($(this).val() === "2"){
        $('#InitialLeakSource option[data-aob=Above]').hide();
        $('#InitialLeakSource option[data-aob=Below]').show();
    }
    else {
     $('#InitialLeakSource option').show();
    }
});

PS: The above picture is not clear in 100%, please zoom for a clear vision.

Just hiding the options doesn't make them non-selectable, you have to disable them. — adeneo, Sep 28 '13 at 11:03
@adeneo However when I change the value by "CLICK" event it is not showing. I'm confused why this happens only when I change option via KEY DOWN event — Praveen, Sep 28 '13 at 11:07
When you open the select, the options are hidden, but when you scroll through the options with the keys, the value of the select changes, and those options are still selectable even if they are hidden, you have to disable them. — adeneo, Sep 28 '13 at 11:10
Please note that your jsFiddle does not work at all in IE9. Adding the disabled attribute will grey out the option though. — Sumurai8, Sep 28 '13 at 11:13
@Sumurai8 Yes it is not workin in IE9, do you have any idea in this behavior. — Praveen, Sep 28 '13 at 11:16
@adeneo Thanks for the workaround solution. But I would like to know why it is happening? The behavior should be same for "CLICK" and "KEYPRESS" event. — Praveen, Sep 28 '13 at 11:19
Options **can not** be styled in IE, so you can't hide them either. — adeneo, Sep 28 '13 at 11:20
@user1671639 "It's IE" - This might be useful: http://stackoverflow.com/questions/2031740/hide-select-option-in-ie-using-jquery — Sumurai8, Sep 28 '13 at 11:21

Mohammad Ismail Khan · Answer 1 · 2013-09-28T11:26:20.443

1

just add the below line at the end of you function

$('#InitialLeakSource').val('');

please check fiddle

edited Sep 28 '13 at 11:26

answered Sep 28 '13 at 11:15

Mohammad Ismail Khan

641
3
7

I think you misunderstood my question. Please take a look at the image I have in my question. – Praveen Sep 28 '13 at 11:17
You answer was that when you select that when you select Above, its show Above 1,Above 2 in the 2nd dropdown. And if select Above1 in 2nd Drop down, and you move back to dropdown1 and select Below, Above1 is still there? Just check the answer in jsfiddle – Mohammad Ismail Khan Sep 28 '13 at 11:20
Yes I know, However if you change option by pressing down key it is still showing the hidden option. You can easily reproduce this in my fiddle – Praveen Sep 28 '13 at 11:21
check my answer, i have given the link, it's not show the hidden options. – Mohammad Ismail Khan Sep 28 '13 at 11:22
+1 Same as [@adeneo 's fiddle](http://stackoverflow.com/questions/19066198/weird-behavior-in-change-event/19066334?noredirect=1#comment28180624_19066198) Anyway thank you. – Praveen Sep 28 '13 at 11:25
well I am not sure why you are saying same as @adeneo's fiddle, because I have made changes in it. http://jsfiddle.net/ueHMP/12/. and it's working fine with me. just give a go. – Mohammad Ismail Khan Sep 28 '13 at 11:28

Weird behavior in "change" event

1 Answers1