Question

On this page, the expected behavior is to display the custom sizes input boxes such as Bust (inch) and Hips (inch) when the user selects ‘Custom Size’ in the ‘Size’ select box. What I have now is this:

<select name="options[203]" id="select_203"
 class=" required-entry product-custom-option"
 title="" onchange="opConfig.reloadPrice();if(this.options[this.selectedIndex].text=='Custom Size'){$('.custom_size').show();}else{$('.custom_size').hide();}">

Basically, I used this in there:

if(this.options[this.selectedIndex].text=='Custom Size'){$('.custom_size').show();}else{$('.custom_size').hide();}

And all the elements that can be toggled in this manner have class ‘custom_size’ which is ‘display:none’ in the stylesheet styles.css.

But thus far it doesn’t seem to work. Any idea why? Thanks a lot!

Answer 1

I see you are using Prototype library along with jQuery. You should use jQuery.noConflict().