За последние 24 часа нас посетили 17647 программистов и 1283 робота. Сейчас ищут 1329 программистов ...

Как добавить последнее значение option в блок при select multiple?

Тема в разделе "JavaScript и AJAX", создана пользователем ushkom, 23 май 2020.

  1. ushkom

    ushkom Активный пользователь

    С нами с:
    5 сен 2016
    Сообщения:
    68
    Симпатии:
    1
    Доброго времени суток. Подскажите знающие, как добавить при выборе option его текст в при select multiple, и добавлять все последующее option в конец существующего через запятую, при отмене option удалить с блока, и в блоке должна быть возможность удалить выбранное. При очистки формы все удалять.

    Пример:

    PHP:
    1. <div class="filter">
    2. <div class="filter-rez" id="itog"></div>
    3.  
    4.  
    5.  
    6. <form data-dlefilter="dle-filter">
    7.   <select name="sort">
    8.     <option value="date">По дате</option>
    9.     <option value="comm_num">По комментариям</option>
    10.     <option value="news_read">По просмотрам</option>
    11.     <option value="rating">По рейтингу</option>
    12.     <option value="d.time">По продолжительности</option>
    13.   </select>
    14.  
    15.   <select name="cat" id="cat" multiple data-placeholder="Категория" data-select-config="Поиск;">
    16.     <option value="1">Выбор 1</option>
    17.     <option value="79">Выбор 2</option>
    18.     <option value="8">Выбор 3</option>
    19.     <option value="44">Выбор 4</option>
    20.   </select>
    21.  
    22.   <select name="modeli" id="modeli" multiple data-placeholder="Товары" data-select-config="Поиск;">
    23.     <option value="Выбор 5">Выбор 5</option>
    24.     <option value="Выбор 6">Выбор 6</option>
    25.     <option value="Выбор 7">Выбор 7</option>
    26.     <option value="Выбор 8">Выбор 8</option>
    27.   </select>
    28.  
    29.     <div class="filter-button">  
    30.   <input type="button" data-dlefilter="submit" value="Поиск">
    31.   <input type="button" data-dlefilter="reset" value="Очистить">
    32.   </div>
    33. </form>
    34. </div>
    То что получилось сделать

    Код (Javascript):
    1. $(document).ready(function() {
    2.  
    3. $('#modeli').change(function() {
    4.     var value = $('#modeli option:selected').text();
    5.     $('#itog').empty();
    6.     $('#itog').append('<span>'+value+'</span>');
    7.   });
    8. });
    Спасибо за помощь.
     
  2. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    3.859
    Симпатии:
    749
    Адрес:
    Татарстан
    Используйте готовые js библиотеки, например select2
     
  3. ushkom

    ushkom Активный пользователь

    С нами с:
    5 сен 2016
    Сообщения:
    68
    Симпатии:
    1
    Я использую Tail.Select но она эту задачу не решает
     
  4. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    3.859
    Симпатии:
    749
    Адрес:
    Татарстан
    Не хотите готовые - пишите свои.