Имеем на странице самый обычный input. Никаких манипуляций с кодом этой формы мы проводить не можем, то есть, добавлять что либо можно только по средствам js. Нужно превратить input в выпадающий список. Картинка для понимания вопроса.
По факту, его нужно скрыть и добавить после него такой код:
<div class="select">
<span class="placeholder">Выберите значение</span>
<ul>
<li data-value="es">Значение 1</li>
<li data-value="en">Значение 2</li>
<li data-value="fr">Значение 3</li>
<li data-value="de">Значение 4</li>
</ul>
</div>
Значения из data-value при выборе пункта должны попадать в input, а содержимое выбранного пункта списка попадать в span.
Есть скрипт, как это дело можно реализовать имея доступ к редактированию формы, прикреплю его для ознакомления, но, доступа к редактированию нет.
$('.select').on('click','.placeholder',function(){
var parent = $(this).closest('.select');
if ( ! parent.hasClass('is-open')){
parent.addClass('is-open');
$('.select.is-open').not(parent).removeClass('is-open');
}else{
parent.removeClass('is-open');
}
}).on('click','ul>li',function(){
var parent = $(this).closest('.select');
parent.removeClass('is-open').find('.placeholder').text( $(this).text() );
parent.find('input[type=text]').attr('value', $(this).attr('data-value') );
});
.select li {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select">
<span class="placeholder">Выбрать язык</span>
<ul>
<li data-value="es">Испанский</li>
<li data-value="en">Английский</li>
<li data-value="fr">Французский</li>
<li data-value="de">Немецкий</li>
</ul>
<input type="text" name="myname"/>
</div>
Возможно удастся просто дополнить этот скрипт. Буду признателен за любую помощь в этом вопросе. Спасибо!