Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.05.2012, 04:35
Интересующийся
Отправить личное сообщение для px379 Посмотреть профиль Найти все сообщения от px379
 
Регистрация: 15.10.2011
Сообщений: 13

Выпадающий список с возможностью добавлять/удалять элементы
Здравствуйте, помогите со скриптом, тока я уже боюсь что написал такое, что и редактировать будет проблемно)

Есть скрипт выпадающего списка в который можно добавлять элементы, но надо еще добавить возможность удалять элементы. Т.е. должна быть еще одна кнопка, при нажатии на которую будет удален элемент с именем, который расположен в текстовом поле.

Создать радиокнопки, которые заменят кнопки «Добавить», «Удалить». Т.е. этими переключателями пользователь должен выбирать что хочет сделать, а затем нажать кнопку «Применить», которая обработает состояние переключателей и выполнит нужное действие.

JS
var textarray = new Array("Один", "Два", "Три", "Четыре");
    
    function toggle (id, display) {
      var citylist = document.getElementById(id);
      
      if (citylist.style.display == 'none' && display == '') {
        citylist.innerHTML = '';
        for(var i=0; i<textarray.length; i++) {
          var newDiv = document.createElement('div');
          newDiv.innerHTML = textarray[i];
          newDiv.onmousedown = function () {
            var city = document.getElementById('city');
            city.value = this.innerHTML;
            city.blur();
          }
          citylist.appendChild(newDiv);
        }
      }  
      
      citylist.style.display = display;    
    }
    
    window.onload = function () {
      var city = document.getElementById('city');
      var button = document.getElementById('button');
      
      var newDiv = document.createElement('div');
      newDiv.style.position = "absolute";
      newDiv.style.width = city.style.width;
      newDiv.id = 'citylist';
      city.parentNode.insertBefore(newDiv, city.nextSibling);
    
      toggle ('citylist', 'none');
      
      city.onfocus = function () {
          toggle ('citylist', '');
      }
      city.onblur = function () {
        toggle ('citylist', 'none');
      }

      button.onclick = function () {
        textarray.push(city.value);
        textarray.sort();
        city.value = '';
        city.blur();
      }
    }


HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Test</title>
	<style type="text/css">
    #citylist {
      margin: 0 2px;
    }
    #citylist div {
      border: 1px solid grey;
      margin: 1px;
      padding: 2px 4px;
      font-size: smaller;
      cursor: pointer;
    }
    #citylist div:hover {
      background: #eee;
    }
	</style>

</head>
<body>
  <form name="main">
    <input id="city" type="text" value="" style="width: 200px;" />
    <input id="button" type="button" value="Добавить" style="width: 100px;" />
  </form>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 09.05.2012, 22:12
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

В чем проблема-то?
Если вы научились использовать createElement и appendChild, то наверное способны разобраться и с removeChild.
http://learn.javascript.ru/modifying-document
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Autocomplete + выпадающий список yarnik jQuery 0 08.03.2012 14:20
Как правильно скопировать выпадающий список <select ... diiimonn Элементы интерфейса 1 13.06.2011 09:23
Выпадающий список не помещается в div'е LA_ Элементы интерфейса 5 01.11.2010 10:43
Выпадающий список с возможностью ввода текста LA_ Элементы интерфейса 6 27.10.2010 16:30
Помогите вставить в форму не только чекбоксы но и выпадающий список seva_81 Серверные языки и технологии 3 20.09.2010 10:02