@Dave: when I selected the first product it showed me its options.
Changing an option didn't do a thing.
Clicking again on first product, hid its options.
@motob: I used this instead:
$(".product-type").change(function(){
if($(this).val() == "filters"){
$('fieldset.filters').slideDown("slow");
} else {
$('fieldset.filters').slideUp("slow");
}
});
Because I have about 8 products not only 2. It worked for one so, I
guess it will work for all 8 if I define it separately for each
product.
First of all thank you.
Second, is there anyway to streamline this code instead of repeating
it 8 times? or should I just bite the bullet?
What do you reckon?
Cheers,
Elle
On May 2, 12:35 am, motob <[EMAIL PROTECTED]> wrote:
> Instead of adding click listeners to the option elements, add a change
> listener to the overall <select> menu. Once the change event is fired,
> determine which value is choosen, then show/hide the appropriate
> option fieldset. NOTE: You may want to change the values of the option
> elements so that they don't contain spaces. I'm not sure if those
> spaces will cause problems or not.
>
> $(document).ready(function(){
> $("#product-type").change(function(){
> if($(this).val() == "product a"){
> $('fieldset.producta').slideDown("slow");
> $('fieldset.productb').slideUp("slow");
> }
> else {
> $('fieldset.productb').slideDown("slow");
> $('fieldset.producta').slideUp("slow");
> }
> });
>
> });
>
> The above code is untested, but that is the basic idea of what you
> would need to do.
> On May 1, 4:57 am, Waz and Elle <[EMAIL PROTECTED]> wrote:
>
> > Hi again,
>
> > I have a form with products select menu. I would like to show and hide
> > product specific options as the user selects them. Now, I can show the
> > product options but I don't know how to hide them if the user selects
> > a different product.
>
> > My HTML is:
> > .... snip...
> > <select id="product-type" name="product-type" class="product-type">
> > <option value="select"
> > selected="selected">-Select-</option>
> > <option value="product a" class="producta">Product
> > A</option>
> > <option value="product b" class="productb">Product
> > B</option>
> > </select></p>
> > <fieldset class="producta options"> ... </fieldset>
> > <fieldset class="productb options"> ... </fieldset>
> > .... snip ....
>
> > My code at the moment is:
>
> > $('#orderform').find('.options').hide();
> > $('.product-type').find('option.producta').click(function(select) {
> > $('fieldset.producta').slideDown("slow");
> > });
> > $('.product-type').find('option.productb').click(function(select) {
> > $('fieldset.productb').slideDown("slow");
> > });
>
> > So, if I change the user changes his/her mind between product a to
> > product b, the options stay visible, and I'm not sure how to hide them
> > again.
>
> > Also, if the user already entered information in the fieldset's
> > fields, should I reset them when I hide them?
>
> > Any advice will be great.
> > Thanks,
> > Elle
