jQuery IE

I have a jQuery function that hides a select option if you are located in a specific state.  The script works fine in all browsers but not in IE.  What do I do to fix that?

<script>
//  END Vehicle Total Output
var illinois_hide = $('[name*="[0][location_state]"]').val();

if( illinois_hide == "IL") {
$('#bike_type').children('option[value="Electric / Pedal Assist"]').css('display','none');
};

Open in new window

LVL 7
rgranlundAsked:
Who is Participating?
 
Rainer JeschorCommented:
Hi,
should be
$('#bike_type').children('option[value="Electric / Pedal Assist"]').remove();

Sorry I am on mobile now so not fully tested.
0
 
Rainer JeschorCommented:
Hi,
which jQuery version and which version of IE?
What kind of element is this?
var illinois_hide = $('[name*="[0][location_state]"]').val();

Open in new window

Is it a select?
Thanks
Rainer
0
 
Snarf0001Commented:
Unfortunately, hiding options is not cross browser.  IE just doesn't support it, Chrome used to not, but does now, and I don't think Opera does either.  Not sure about Safari.

The best way to do it is to actually remove the option from the list and keep track of it.
A much hackier option (albeit faster), is to wrap it in another tag and hide it for IE.  Note that this is EXTREMELY invalid markup, hence the focus on "hackier", but in a pinch can be used.

$('#bike_type').children('option[value="Electric / Pedal Assist"]').wrap("<span></span>").css('display','none');

Open in new window


But if you're not going to have to toggle it back on, then just remove it completely.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Rainer JeschorCommented:
Hi,
looks like IE is ignoring the CSS styling / option display none (tested with IE11 on Win 8.1).
Two alternatives:
- Remove the option completely from the DOM with JavaScript on the client side(and add it otherwise if is not there)
- Set the option to status disabled:
$('#bike_type').children('option[value="Electric / Pedal Assist"]').attr('disabled','disabled');

Open in new window

See live sample:
http://jsfiddle.net/EE_RainerJ/unt74vug/
HTH
Rainer
0
 
rgranlundAuthor Commented:
None of these ideas seem to work.  Instead of hiding it, how do I write the code to remove it?
0
 
rgranlundAuthor Commented:
@rainer The remove does not work in IE.
0
 
Snarf0001Commented:
rgranlund, rainer's code is 100% correct.  Jquery remove would pull off on any browser you're using, even back to IE6.
If it's not working, then there's something else going on, or something being missed.
Can you post the full html or a jsfiddle?

Could be that that the <script> file you showed is not rendering after the dom load.  In which case either wrapping it in a document.ready or putting it at the bottom of the file should fix it, but just guessing without seeing the full markup.
0
 
rgranlundAuthor Commented:
I did not have it in the document ready, it was in a function.  Thanks for the help, this has driven me nuts!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.