Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.11.2015, 23:00
Профессор
Отправить личное сообщение для djonA Посмотреть профиль Найти все сообщения от djonA
 
Регистрация: 02.05.2012
Сообщений: 197

Вывести в select все данные class
На странице произвольное кол-во span с определенным class.
Мне надо при клике на select в него вывести все эти значения.

<span class="alliki">1</span>
<span class="alliki">2</span>
<span class="alliki">3</span>
<span class="alliki">4</span>

При клике на Select мне надо в него вставить все данные span, чтобы получилось вот так:
<select id="select" onclick="">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>


Не получается сделать, подскажите пжл как сделать
Ответить с цитированием
  #2 (permalink)  
Старый 08.11.2015, 23:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

djonA,
и что мешает циклом обойти все span?
Ответить с цитированием
  #3 (permalink)  
Старый 08.11.2015, 23:22
Профессор
Отправить личное сообщение для djonA Посмотреть профиль Найти все сообщения от djonA
 
Регистрация: 02.05.2012
Сообщений: 197

прохожусь так:

$(".alliki").each(function() {}


а дальше как их вставить в select?
Ответить с цитированием
  #4 (permalink)  
Старый 08.11.2015, 23:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

djonA,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
  window.addEventListener('DOMContentLoaded', function() {
  var nodes = document.querySelectorAll('.alliki'),
  select = document.querySelector('select');
  select.addEventListener('mousedown', function create() {
     [].forEach.call( nodes, function(span) {
            var val = span.innerHTML;
            var option = new Option(val, val);
            select.appendChild(option)
     });
  select.removeEventListener('mousedown',create)
  });
    });
  </script>
</head>

<body>
<span class="alliki">1</span>
<span class="alliki">2</span>
<span class="alliki">3</span>
<span class="alliki">4</span>


<select id="select" >
</select>


</body>

</html>
Ответить с цитированием
  #5 (permalink)  
Старый 08.11.2015, 23:50
Профессор
Отправить личное сообщение для djonA Посмотреть профиль Найти все сообщения от djonA
 
Регистрация: 02.05.2012
Сообщений: 197

а если не привязываться к select id='select', а вставлять во все select с class='select'

Т.е скажем у меня на странице не 1 а несколько select с class='select' как во всех них вставить:
<span class="alliki">1</span>
<span class="alliki">2</span>
<span class="alliki">3</span>
<span class="alliki">4</span>
<select class="select" >
</select>
<select class="select" >
</select>

при открытии 1 select вставлять во все select данные из span?
Ответить с цитированием
  #6 (permalink)  
Старый 08.11.2015, 23:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

djonA,
добавить цикл по селектам и всё
Ответить с цитированием
  #7 (permalink)  
Старый 09.11.2015, 00:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

djonA,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
  window.addEventListener('DOMContentLoaded', function() {
    window.addEventListener('mousedown', function create(event) {
  var nodes = document.querySelectorAll('.alliki'),
  selects = document.querySelectorAll('.select');
  var cls = event.target.classList;
  if(cls && cls.contains("select")){
  [].forEach.call( selects, function(select) {
  [].forEach.call( nodes, function(span) {
            var val = span.innerHTML;
            var option = new Option(val, val);
            select.appendChild(option)
     })
      })
     };
  window.removeEventListener('mousedown',create)
  });
    });
  </script>
</head>

<body>
<span class="alliki">1</span>
<span class="alliki">2</span>
<span class="alliki">3</span>
<span class="alliki">4</span>


<select class="select" >
</select>
<select class="select" >
</select>

</body>

</html>

Последний раз редактировалось рони, 09.11.2015 в 01:54.
Ответить с цитированием
  #8 (permalink)  
Старый 09.11.2015, 01:25
Профессор
Отправить личное сообщение для djonA Посмотреть профиль Найти все сообщения от djonA
 
Регистрация: 02.05.2012
Сообщений: 197

Отлично спасибо все работает.
Только хочу повесить на onclick, ане при загрузке страницы, так как в случае добавление на страницу элементов, они не активны.

пробую так но добавляется в двойном кол-ве option:
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
  function go123() {
  var nodes = document.querySelectorAll('.alliki'),
  selects = document.querySelectorAll('.select123');
  window.addEventListener('mousedown', function create(event) {
  var cls = event.target.classList;
  if(cls && cls.contains("select123")){
  [].forEach.call( selects, function(select123) {
  [].forEach.call( nodes, function(span) {
            var val = span.innerHTML;
            var option = new Option(val, val);
            select123.appendChild(option)
     })
      })
     };
  window.removeEventListener('mousedown',create)
  });
    };
  </script>
</head>

<body>
<span class="alliki">1</span>
<span class="alliki">2</span>
<span class="alliki">3</span>
<span class="alliki">4</span>


<select class="select123" onclick="go123();">
</select>
<select class="select123" onclick="go123();">
</select>

</body>

</html>

подскажите как при onclick проходится по span'ам и обновлять правильное кол-ве option в select'e, или просто удалить повторяющиеся значения option?
Ответить с цитированием
  #9 (permalink)  
Старый 09.11.2015, 01:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

djonA,
пост 7 сейчас сработает когда бы вы недобавили без всяких onclick
Ответить с цитированием
  #10 (permalink)  
Старый 09.11.2015, 02:02
Профессор
Отправить личное сообщение для djonA Посмотреть профиль Найти все сообщения от djonA
 
Регистрация: 02.05.2012
Сообщений: 197

если я нажал на select а после этого добавились span, то новый span не добавляется в select.

т.е не отрабатывает если после загрузки страницы у меня добавляются или span или select.

А если на onclick вешаю, то отрабатывает но почему то дублирует значение, на каждый клик увеличивает кол-во выводимых в select option'ов

Последний раз редактировалось djonA, 09.11.2015 в 02:07.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Контекстное меню как считать данные из таблицы xela1980 jQuery 25 31.05.2013 14:20
Подгрузка select и работа с ними после! BASSON_XVI jQuery 3 07.01.2011 11:28
Вывести все пост переменные PHP mycoding Серверные языки и технологии 4 21.06.2010 21:52
Продлема с получением данных из select Tartyga Общие вопросы Javascript 10 05.08.2009 22:13
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37