[Catalyst] HTML::FormHandler onchange event

[Will Crawford]

On 24 September 2012 20:08, gorste <gordon at gorste.plus.com> wrote:
> Hi
>
> Is this the right mailing list to asked a question about FormHandler?
>
> What is the best way to do a onchange event on a select drop down?   I have
> a drop down of male and female and a drop down of male clothes sizes and
> female clothes sizes if I choose male I only want to show male clothes
> sizes. Is there and example of something similar.

I can't vouch for the "best" way, but it sounds like there are a
couple of options.

One, have different SELECTs, all but one initially hidden, and
show/hide them based on the state of your selector (quite easily
done).

Two, have one select, add CSS classes on the OPTION elements, and show
or hide those (and presumably reset the selected index if one that
you're hiding is currently selected). *Something* like:

   <select ....>
      <option class="male">...
      <option class="female">...

followed by code *something* like:

    function onChangeSex () {
        var $select = jQuery(...);
        if (this.value == 'male') {
            $select.children('option.male').show().removeProp('disabled');
            $select.children('option.female').hide().prop('disabled', true);
        } else {
            $select.children('option.female').show().removeProp('disabled');
            $select.children('option.male').hide().prop('disabled', true);
        }
        if ($select.children('option').filter(function(){return
this.selected && this.disabled}).length) {
            $select.children('option').filter(function(){return
!this.disabled}).first().prop('selected', true);
        }
    }

Further refactoring for conciseness is left as an exercise for the reader :)

> Regards
>
> Gordon
>
>
> _______________________________________________
> List: Catalyst at lists.scsys.co.uk
> Listinfo: http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst
> Searchable archive: http://www.mail-archive.com/catalyst@lists.scsys.co.uk/
> Dev site: http://dev.catalyst.perl.org/