Не запускается JS событи...

[Dikucher]

сайт http://dk.farla.ru/
по кнопке Регистрация ( верху справа ) запускается модальник.
в нем форма, на <select> повешан скрипт для оформления ( возможно проблема как раз из-за него )
В верхнем <select> ( Производитель, Торговая компания, Я ищу работу, Покупатель) нужно реализовать следующую логику, чтобы при клике на конкретный пункт, происходило скрытие текущие формы, и появление другой
вот выделил код селекта

Код:

<select class="select-field chosen-select">
                <option class="producer-option">Производитель</option>
                <option class="buyer-option">Покупатель</option> 
               <option class="company-option">Торговая компания</option> 
               <option class="job-option">Я ищу работу</option>
</select>

а вот что я пытаюсь повешать на JS

Код:

$("#company-option").click(function(){
        $('.producer-form').fadeOut(150);
        $('.company-form').fadeIn(150);
    })

но почему то событие JS не работает

[brainix]

А как ему работать когда нет элементов с классами company-form и producer-form ?

повешать

Повесить

[easymisc]

в форме класс "company-option", а в скрипте обращение к ид "company-option"

[Dikucher]

easymisc, опечатка, в скрипте стоит класс

[brainix]

Dikucher, попробуйте модальное окно создавать не динамически, а чтобы при загрузке страницы оно было сразу, только невидимым.

[Dikucher]

brainix, этот вариант мне не подходит

то что я хотел ( а именно, при выборе конкретного <option> чтобы скрывалась текущая форма, и открывалась форма для выбранного <option> я реализовал ( помогли на http://javascript.ru ) следующим образом )

Код:

$(".select-field.chosen-select").change(function(){
        if($(this).find('.job-option').is(':selected')) {
            $('.form-standard').fadeOut(0);
            $('.job-form').fadeIn(0);
        }
        if($(this).find('.producer-option').is(':selected')) {
            $('.form-standard').fadeOut(0);
            $('.producer-form').fadeIn(0);
        }
        if($(this).find('.buyer-option').is(':selected')) {
            $('.form-standard').fadeOut(0);
            $('.buyer-form').fadeIn(0);
        }
        if($(this).find('.company-option').is(':selected')) {
            $('.form-standard').fadeOut(0);
            $('.company-form').fadeIn(0);
        }


        return false;
    })

http://dk.farla.ru/, переход по кнопке Регистрация ( справа вверху )
Проблема - при выборе <option> у верхнего селекта, формы скрываются и появляются правильно, но вот как то странно подтягивается значение выбранного <option> ( первые пару раз происходит все правильно, но потом идет этот не понятный сбой )

я проверил, отключив скрипт который задает оформеление селекта, проблема остается.