Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.89/9: Рейтинг темы: голосов - 9, средняя оценка - 4.89
0 / 0 / 0
Регистрация: 29.10.2013
Сообщений: 16

Дублирование элементов Select в input

03.09.2015, 01:52. Показов 1852. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый вечер коллеги.
Столкнулся с проблемой следующего рода:
Есть два объекта Select, а именно Select1 и Select2, так же имеется один input типа hidden.
Не могу продублировать добавляемые элементы из Select1 в Select2 и Input.
Из Select1 в Select2 переместить удается, но как сделать чтобы элементы добавлялись в input через запятую.
А именно: В Select2 содержатся слова бег, рисование, чтение и так далее, и input'e должны содержаться они только через запятую.

Пожалуйста, помогите в данном вопросе. Заранее искренне благодарен.

Перекидывание из Select1 в Select2 и обратно:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
        function HobbyRight (){
            var objSel1 = document.getElementById("select1");
            var objSel2 = document.getElementById("select2");
            var objSel3 = document.getElementById("hideout");
            if (objSel1.selectedIndex !=-1){
                objSel2.options[objSel2.options.length] = new Option(objSel1.options[objSel1.selectedIndex].text, objSel1.options[objSel1.selectedIndex].value);
                objSel1.remove(objSel1.selectedIndex);
            }
 
        }
        function HobbyLeft (){
            var objSel1 = document.getElementById("select1");
            var objSel2 = document.getElementById("select2");
            if (objSel1.selectedIndex !=1){
                objSel1.options[objSel1.options.length] = new Option(objSel2.options[objSel2.selectedIndex].text, objSel2.options[objSel2.selectedIndex].value);
                objSel2.remove(objSel2.selectedIndex);
 
            }
 
        }
    </script>
Непосредственно Select'ы:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<label for="select1">Хобби:</label><br>
            <select class="slc" name="Хобби_old" id="select1" multiple title="Хобби">
                <option value="Рисование">Рисование</option>
                <option value="Вождение">Вождение</option>
                <option value="Плавание">Плавание</option>
                <option value="Бег">Бег</option>
                <option value="Чтение">Чтение</option>
                <option value="Пение">Пение</option>
            </select>
 
            <select class="slc" name="Хобби" id="select2" onsubmit="submit" multiple>
            </select>
            <input name="Хобби" id="hideout" type="text"><br>
 
            <button class="btn" type="button" onclick="HobbyRight()">----></button>
            <button class="btn" type="button" onclick="HobbyLeft()"><----</button>
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
03.09.2015, 01:52
Ответы с готовыми решениями:

Запрет на редактирование всех элементов на странице, select option, textarea, input text
Помогите пожалуйста, необходимо сделать так чтобы при клике на кнопку сработала функция и все элементы были заблокированы(disabled), а до...

Дублирование текста с input в span
Здравствуйте! В java я не силен... Мне нужно, чтобы при вводе текста в определенный импут текст сразу же дублировался в соответствующий...

Дублирование элемента SELECT (PHP страница)
Всем привет! Помогите пожалуйста реализовать дублирование элементов SELECT. Есть вот такого вида select: &lt;select...

2
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
03.09.2015, 03:39
Link-Lock, то, что у вас есть на данный момент, не будет корректно работать, т.к. списки с множественным выбором (multiple), а переносится всегда будет только один option. Попробуйте такой вариант (пример в песочнице):
JavaScript
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
var but = [].slice.call(document.querySelectorAll('.btn')),
    sel = document.querySelectorAll('.slc'),
    hideout = document.getElementById('hideout');
for (var i = 0; i < but.length; i++) {
    but[i].addEventListener('click', function () {
        var indx = but.indexOf(this);
        if (sel[indx].selectedIndex >= 0) {
            var picked = [].filter.apply(sel[indx].options, [function (o) {
                return o.selected;
            }]);
            for (var i = 0; i < picked.length; i++) {
                sel[1 - indx].appendChild(picked[i]);
            }
            sel[1 - indx].selectedIndex = -1;
            refreshList();
        }
    }, false);
}
 
function refreshList() {
    var list = [];
    for (i = 0; i < sel[1].options.length; i++) {
        list.push(sel[1].options[i].value);
    }
    hideout.value = list.join(',');
    return false;
}
1
0 / 0 / 0
Регистрация: 29.10.2013
Сообщений: 16
03.09.2015, 14:44  [ТС]
Lazy_Den, Спасибо огромное! Это именно то, что было необходимо!
Я Вам невероятно благодарен.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
03.09.2015, 14:44
Помогаю со студенческими работами здесь

input в select'e
Привет всем. Возникла такая проблема. Сделал поиск в select'e следующим образом: вводим в input что-то =) и в select'e необходимые...

Select & INPUT
Есть форма. В ней есть Select в котором два option - One away и Return Задача: Если выбираю option - one away, то появляется...

Значение из Input в Select
Всем доброго времени суток. Есть конструкция: &lt;select name=&quot;sertificate&quot; class=&quot;sertificate&quot;&gt; &lt;option...

Несколько вариантов из select в input.
&lt;form method=&quot;post&quot; name=&quot;FormName&quot;&gt; &lt;label&gt; Home &lt;select name=&quot;sostavhome&quot; multiple...

Как вставить select в input?
Добрый день. Подскажите как вставить select в input? Есть форма в которой есть список для выбора даты.


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Автозаполнение реквизита при выборе элемента справочника
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, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru