Удаление Option из Select по клику

@saddamnv · Регистрация: 02.01.2016

Студворк — интернет-сервис помощи студентам

Есть такой не замысловатый код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <script type="text/javascript">
            function addList() {
                var parent = document.getElementById("NameList");
                var count = parent.getElementsByTagName("option").length ;
                if (count < 21)
                {
                    var op = document.createElement("option");
                    /* Добавляем в конец */
                    var Name = document.getElementById("inputName").value;
                    var Year = document.getElementById("inputYear").value;
                    var key = Name  + ', ' + Year;
                    op.value = (key);
                    op.innerHTML = key;
                    parent.appendChild(op);
                }
                else
                {
                    var Status = document.getElementById("Status").innerHTML = 'Можно добавить 21 человека!';
                }
            }
            function delList() {
                var sel = document.getElementById('NameList');
                sel.removeChild(sel.options[sel.selectedIndex]);
            }
        </script>
        <form id="addname">
            <input type="text" id="inputName"><br />
            <input type="text" id="inputYear"><br />
            <div id="AddPerson" onclick="addList()">Добавить элемент</div><br />
            <div id="Status"></div> <br />
            <select id="NameList" size="22">
                <option value="Вася,2001_1">Вася, 2001 <div  id="Вася,2001_1_del" onclick="delList()">Удалить</div></option>
            </select> <br />
        </form>
    </body>
</html>

И у меня вопрос:
1. Как внутри Option обработать удаление?
Ожидаемый конечный результат -
При наведение на option будет показываться "крестик", при нажатии на который будет удаляться option, как это сделать у меня есть идея и я ее сейчас пробую, но что то не получается пока, хочу ваши предложения увидеть.

@cyb0rg_01 · 14.04.2017, 21:01

Сообщение от saddamnv

При наведение на option будет показываться "крестик"

select использует нативное для ОС выпадающее меню, поэтому менять само выпадающее меню не получится, в т.ч. и option'ы. Нужно писать кастомный dropdown или юзать, например, dropdown из бутстрапа.

@saddamnv · 15.04.2017, 09:55 **[ТС]**

Мне нужно не выпадающее менню, а список, в который пользователь сможет записывать значения, удалить их оттуда при ошибочной записи и что бы это можно было потом передать PHP скрипту

@cyb0rg_01 · 15.04.2017, 14:34

saddamnv, имеется ввиду, что option'ы у select'a не изменить никак и нужно использовать не select, a dropdown.

@saddamnv · 15.04.2017, 19:15 **[ТС]**

а внутрь input вставить?

@cyb0rg_01 · 15.04.2017, 19:20

saddamnv, зачем что-то изобретать непонятное, если есть dropdown?

@saddamnv · 15.04.2017, 19:22 **[ТС]**

pro_100_gram, а как я его потом передам на сервер? Хотелось бы попроще решение конечно. JQuery я не знаю и что то плагинов под задачу не найду готовых

@cyb0rg_01 · 15.04.2017, 19:42

saddamnv, смотрите bootstrap

@Padimanskas · 15.04.2017, 22:12

saddamnv, можно попробовать в виде ul li списка.

HTML5
1
2
3
4
5
<ul>
  <li data-id="1">1 <span>x</span></li>
  <li data-id="2">2 <span>x</span></li>
  <li data-id="3">3 <span>x</span></li>
</ul>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
document.addEventListener('click', function(e){
    var target = e.target, ul, li, deleteItemEvent;
  if(target.tagName !== 'SPAN') return false;
  ul = target.parentElement.parentElement,
  li = target.parentElement;
    deleteItemEvent = new CustomEvent('deleteItem', {bubbles: true, detail: {parent: ul, elem: li, id: +li.dataset.id}});
  li.dispatchEvent(deleteItemEvent);
  
});
 
document.addEventListener('deleteItem', function(e){
    alert('Здесь можно вызвать AJAX. Id удаленного элемента: ' + e.detail.id);
  e.detail.parent.removeChild(e.detail.elem);
});

https://jsfiddle.net/q7nb5naq/

@saddamnv · 17.04.2017, 08:28 **[ТС]**

Padimanskas, я как раз это и хотел! Благодарю!

Буду в этом направлении мануалы курить!

Новые блоги и статьи Все статьи Все блоги /
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .

@saddamnv 1 / 1 / 2 Регистрация: 02.01.2016 Сообщений: 15
	15.04.2017, 09:55 [ТС]
	Мне нужно не выпадающее менню, а список, в который пользователь сможет записывать значения, удалить их оттуда при ошибочной записи и что бы это можно было потом передать PHP скрипту 0

@cyb0rg_01 Фрилансер 735 / 352 / 96 Регистрация: 05.05.2014 Сообщений: 2,621
	15.04.2017, 14:34
	saddamnv, имеется ввиду, что option'ы у select'a не изменить никак и нужно использовать не select, a dropdown. 0

@saddamnv 1 / 1 / 2 Регистрация: 02.01.2016 Сообщений: 15
	15.04.2017, 19:15 [ТС]
	а внутрь input вставить? 0

@cyb0rg_01 Фрилансер 735 / 352 / 96 Регистрация: 05.05.2014 Сообщений: 2,621
	15.04.2017, 19:20
	saddamnv, зачем что-то изобретать непонятное, если есть dropdown? 0

@saddamnv 1 / 1 / 2 Регистрация: 02.01.2016 Сообщений: 15
	15.04.2017, 19:22 [ТС]
	pro_100_gram, а как я его потом передам на сервер? Хотелось бы попроще решение конечно. JQuery я не знаю и что то плагинов под задачу не найду готовых 0

@cyb0rg_01 Фрилансер 735 / 352 / 96 Регистрация: 05.05.2014 Сообщений: 2,621
	15.04.2017, 19:42
	saddamnv, смотрите bootstrap 0

@saddamnv 1 / 1 / 2 Регистрация: 02.01.2016 Сообщений: 15
	17.04.2017, 08:28 [ТС]
	Padimanskas, я как раз это и хотел! Благодарю! Буду в этом направлении мануалы курить! 0

Удаление Option из Select по клику

Решение