Переключить отображение параметров в Select

Question

Я создаю веб-страницу, которая будет иметь элемент Select с несколькими опциями.Каждый параметр представляет два значения: код и удобочитаемую строку.Я хотел бы позволить пользователю переключать настройку (на той же странице), которая будет динамически переключать выбор, так что будет виден только код или читаемая человеком строка.

Я подумал о пареСпособы сделать это:

1. Когда нажимается переключатель, я воссоздаю страницу, и соответствующие опции загружаются в выбор.Недостатком является очистка всех остальных полей на странице.

2. Наличие 2 Выбирает, где 1 всегда скрыт.У One Select есть опции с кодами.Другой выбор имеет опции с удобочитаемыми строками.Переключатель будет скрывать / показывать соответствующий выбор.Это имеет недостаток в том, что я должен синхронизировать 2 выбора вручную.

Также обратите внимание, что на любой странице будет несколько переключений, которые необходимо переключить.

Любая помощь с благодарностью.

Спасибо, Фил

Answer 1

Вы можете использовать заголовок опции, чтобы удерживать вторую строку и менять ее на переключатель с option.innerHTML

<option title="human-readable string">short</option>

своп к

<option title="short">human-readable string</option>

Answer 2

Я говорю, что это зависит от размера данных, которые будут удерживать выбранные вами.Если это большой кусок, вам лучше подать какую-то первую идею.Ваши выборки динамически растут (например, параметры добавления пользователя и т. Д.)?Если да, я бы пошел AJAXian и сделал бы вторую идею.