Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.06.2016, 23:55
Интересующийся
Отправить личное сообщение для barakuda Посмотреть профиль Найти все сообщения от barakuda
 
Регистрация: 14.11.2015
Сообщений: 17

Необычный select с добавлением и удалением элементов!!ПОМОГИТЕ
http://rgho.st/85DzpwbdL
Вот картинка как должно выглядеть
При клике на селект можно добавлять пару элементов, они становятся друг за другом и слово "добавить" двигается вправо и выбранный элемент имееет серый бекграунд и крестик, при клике на который элемент удаляется!!
Весь вечер голову ломаю
Ответить с цитированием
  #2 (permalink)  
Старый 17.06.2016, 00:46
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title></title>
  <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" />
  <style>   
    .wrap {
      display: inline-flex;
      border: 1px solid #ccc;
      font-family: sans-serif;
    }
    
    select {
      border: none;
      padding: 3px;
    }

    .items span {
      padding: 3px;
      background: #bbb;
      margin-right: 5px;
      display: inline-flex;
    }

    .fa-times {
      margin-left: 3px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="items"></div>
    <select name="" id="">
      <option value="add">Добавить</option>
      <option value="#">Russian</option>
      <option value="#">English</option>
      <option value="#">Portugal</option>
      <option value="#">Japan</option>
    </select>
  </div>
  
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  <script>
    $('select').on('change', function(e) {
      var content = $('option:selected', this).text();

      if ( $(this).val() == 'add') {
        return;
      }
      
      if ( $('.items:contains(' + content + ') ').length ) {
        $('option:first').prop('selected', 'selected');
        return;
      }

      $('.items').append('<span>' + content + '<i class="fa fa-times" aria-hidden="true"></i></span>');
      
      $('option:first').prop('selected', 'selected');
    });
    
    $('.wrap').on('click', '.fa-times', function() {
      $(this).parent().remove();
    });
  </script>
</body>
</html>

Последний раз редактировалось Decode, 17.06.2016 в 01:12.
Ответить с цитированием
  #3 (permalink)  
Старый 23.06.2016, 00:32
Интересующийся
Отправить личное сообщение для barakuda Посмотреть профиль Найти все сообщения от barakuda
 
Регистрация: 14.11.2015
Сообщений: 17

Спасибо большое, немного поздновато увидел, но спасибо)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
2 Select зависимы друг от друга u4enik12 Общие вопросы Javascript 8 13.06.2016 10:40
Проверка нескольких select на одинаковые значения emulexx Общие вопросы Javascript 6 07.04.2015 15:19
Метод для конвертирования едениц px, em, %, pt. jegit Элементы интерфейса 0 07.03.2013 16:15
Проблема с динамическим формированием select elepsion jQuery 1 31.10.2010 14:31