Пользовательское меню выбора, JQuery не работает

Question

Я пытаюсь воспроизвести функциональность стандартного меню выбора, создав пользовательское меню.

Проблема в том, что я не могу заставить его вести себя как меню выбора.Моя цель - иметь возможность заменить «выбранный» текст при каждом нажатии элемента списка.Я также пытаюсь заставить меню закрываться всякий раз, когда пользователь щелкает за пределами меню.

Вот ссылка на мою JS Fiddle:

http://jsfiddle.net/dg7Lc/9/

Я ценю любое понимание!Спасибо!

-D

Answer 1

Что касается исправления вашего кода, вам нужно изменить $('.selected').appendTo('.custom-select span'); на $('.custom-select span').html($('.custom-select ul li.selected').html());

http://jsfiddle.net/dg7Lc/13/

В списках выбора есть особенность в том, что они оформляются браузером /ОС и имеет несколько действий onclick / onblur и сложных действий при нажатии и нажатии других клавиш.

С учетом сказанного, вы, возможно, захотите заглянуть в плагин jquery selectbox.Я очень рекомендую https://github.com/fnagel/jquery-ui, так как я считаю, что он наиболее согласован во всех браузерах, но при этом действует точно так же, как selectbox.

Их код сложный (например, наличие скрытого поля выбора позади отображаемого), но это все необходимо.Исходя из моего личного опыта, этот плагин очень легко разрабатывается и настраивается.