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

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

03.09.2015, 01:52. Показов 1824. Ответов 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
Ответ Создать тему
Новые блоги и статьи
YAFU@home — распределённые вычисления для математики. На CPU
Programma_Boinc 20.01.2026
YAFU@home — распределённые вычисления для математики. На CPU YAFU@home — это BOINC-проект, который занимается факторизацией больших чисел и исследованием aliquot-последовательностей. Звучит. . .
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru