We have on the page the most common input. We cannot carry out any manipulations with the code of this form, that is, we can add anything only by means of js. It is necessary to turn input into a drop-down list. Picture to understand the issue.

enter image description here

In fact, you need to hide it and add the following code after it:

<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>

The values ​​from the data-value when selecting an item should fall into input, and the contents of the selected list item fall into the span.

There is a script for how this case can be implemented with access to editing the form, I will attach it for review, but there is no access to editing.

 $('.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>

Perhaps it will be possible to simply supplement this script. I would appreciate any help in this matter. Thank!

2 answers 2

replacing input with a list

  $(function() { var data = { div: { "class": "select" }, span: { "class": "placeholder", text: "Выбрать язык" }, li: [{ value: "es", text: "Испанский" }, { value: "en", text: "Английский" }, { value: "fr", text: "Французский" }, { value: "de", text: "Немецкий" }] }; $.fn.plugin = function(data) { return this.each(function(index, self) { self.type = "hidden"; var span = $("<span/>", data.span); var ul = $("<ul/>").hide(); var div = $("<div/>", data.div).on("click", function() { ul.fadeToggle("slow") }); data.li.forEach(function(el) { var li = $("<li/>", { text: el.text, click: function() { self.value = el.value; span.text(el.text); $("li", ul).not(li.addClass("active")).removeClass("active") } }).appendTo(ul) }); span.appendTo(div); ul.appendTo(div); $(self).replaceWith(div).appendTo(div); $(document).click(function(event) { if (!$(event.target).closest(div).length) ul.fadeOut("fast") }) }) }; $('[name="myname"]').plugin(data) }); 
 .select { margin: 0; padding 0; background-color: #000000; color: #FFFFFF; font-size: 28px; border-radius: 12px; padding: 4px 8px; display: inline-block; cursor: pointer; } ul { list-style: none; text-align: center; margin-left: -40px; } li.active { background-color: #A9A9A9; border-radius: 12px; padding: 4px 8px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="text" name="myname" />

  • Perfect solution. Thank you very much for your work. - Alexey Giryayev pm
  • Is it possible to add a value check to this script? That is, if one of the given values ​​is already entered in the input, for example, the value "en", then instead of "Select language" will be "English". - Alexey Giryayev

I came up with a solution to my question. However, if someone offers a simpler and faster way, I will be happy to discuss. So, first we need to create a drop-down list of the type we need, then use a script to link the selection of values ​​from this list to the required input, then, using .insertAfter, transfer this block to the desired element. In fact, everything will look like this:

http://codepen.io/pen/BzRjWq

 $('.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() ); $('input[name=myname]').attr('value', $(this).attr('data-value') ); }); $( ".select" ).insertAfter( "input[name=myname]" ); 
 .select .placeholder, .select.is-open ul li { cursor: pointer; } .select ul { display: none; } .select.is-open ul { display: block; } 
 <input type="text" name="myname" value="text" /> <div style="height: 200px;"></div> <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> </div>