2

Имеем на странице самый обычный 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>

Возможно удастся просто дополнить этот скрипт. Буду признателен за любую помощь в этом вопросе. Спасибо!

2

2 ответа 2

2

замена input на список

 $(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" />

2
  • Отличное решение. Спасибо большое за вашу работу. 30 июн 2016 в 18:45
  • Можно ли добавить в данный скрипт проверку value? То есть, если в input уже вписано одно из заданных значений, например, значение "en", то вместо "Выбрать язык" будет "Английский". 21 июл 2016 в 10:33
1

Придумал решение своего вопроса. Однако, если кто-то предложит более простой и быстрый способ, буду рад обсудить. Итак, сперва нужно создать выпадающий список нужного нам вида, затем скриптом связать выбор значений из этого списка с нужным input-ом, после чего, при помощи .insertAfter, перенести этот блок к к нужному элементу. На деле все будет выглядеть так:

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.