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 8
rgranlundAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

rgranlundAuthor Commented:
None of these ideas seem to work.  Instead of hiding it, how do I write the code to remove it?
0
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.