Удаление 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 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .

@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 по клику

Решение