@MarkLb

Как реализовать переключение между текстовым input'ом и dropdown листом?

Здравствуйте.
Есть выпадающий список с содержимым:
XQ556mn.jpg

Но хотелось бы, для улучшения юзабилити, давать возможность не только выбрать содержимое из листа, а иметь возможность самому указать ID.

Т.е. нужна трансформация: select > text-input и чтобы была возможность поменять это в обратном порядке.
Сама структура выпадающего списка:
<div class="form-group field-groupservice-category_id has-success">
<label class="control-label" for="groupservice-category_id">Категория ID</label>
<select id="groupservice-category_id" class="form-control" name="GroupService[category_id]" aria-invalid="false">
<option value="1">Fruit</option>
<option value="2">Vegetables</option>
<option value="4">Roger Federer</option>
</select>

<div class="help-block"></div>
</div>


Пока из идей держать копию text-input'а, копию select'a где-то. Обернуть блок с этим input'ом оберткой, и рядом разместить ссылку "Сменить тип поля". По onclick будет вызываться функция, которая в обертке заменять select<->text-input и саму ссылку на "Сменить тип поля" с этой же функцией, но с другим аргументом. Но кажется, это не самый лучший способ.

P.S. Само приложение на PHP-фрейморвке Yii2.
  • Вопрос задан
  • 175 просмотров
Решения вопроса 1
Stalker_RED
@Stalker_RED
Такие штуки называются combobox. Реализаций хватает:
https://www.google.com/search?q=js+combobox

Также можете посмотреть select2 и choosen, оба могут работать в этом режиме, AFAIR.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы