Здравствуйте, помогите со скриптом, тока я уже боюсь что написал такое, что и редактировать будет проблемно)
Есть скрипт выпадающего списка в который можно добавлять элементы, но надо еще добавить возможность удалять элементы. Т.е. должна быть еще одна кнопка, при нажатии на которую будет удален элемент с именем, который расположен в текстовом поле.
Создать радиокнопки, которые заменят кнопки «Добавить», «Удалить». Т.е. этими переключателями пользователь должен выбирать что хочет сделать, а затем нажать кнопку «Применить», которая обработает состояние переключателей и выполнит нужное действие.
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>
