| |
|
|
| | 2 зависимых списка, причём 2-й список является динамическим. При выборе в первом с помощью первого скрипта подставляем значения во второй список. Второй список должен быть динамическим (до 5) с возможностью выбора переменных в каждом новом добавленном динамическом списке, которые (переменные) были подставлены во второй список после выбора в первом.
Динамичность второго списка обеспечивает второй скрипт.
Оба скрипта рабочие.
Помогите их объединить. Не знаю даже возможно ли это.
Нужен пример объединения на любых переменных списков. Пожалуйста.
1-й скрипт
<head>
<title>Связанные списки</title>
<script type="text/javascript">
// Данные, как бы из базы, сформированные на стороне сервера.
// Обычно находятся в подключаемом JavaScript файле.
var colorsArray = {
BentleyAzure : {red:"Красный",green:"Зеленый"},
ChevroletCorvette : {black:"Черный",blue:"Синий"},
FerrariEnzo : {green:"Зеленый",black:"Черный",yellow:"Желтый"}
}
// Функция, заполняющая список цветами доступными для выбранной модели.
function getColors(_this){
var colors = colorsArray[_this.value];
var _select = document.getElementById("colors");
_select.innerHTML = ""; // Удаляем всех потомков.
for(var i in colors){ // Добавляем доступные цвета.
var option = document.createElement("option");
var optionText = document.createTextNode(colors[i]);
option.appendChild(optionText);
option.setAttribute("value",i);
_select.appendChild(option);
}
// Делаем список цветов видимым.
_select.style.display="inline";
}
</script>
</head>
<body>
<form action="#" method="get">
Модели
<select id="models" name="models" onchange="getColors(this)">
<option value="BentleyAzure">Bentley Azure</option>
<option value="ChevroletCorvette">Chevrolet Corvette</option>
<option value="FerrariEnzo">Ferrari Enzo</option>
</select>
<br/>
Цвета
<select id="colors" name="colors"></select>
<br/>
<input type="submit" value="Выбрать" />
</form>
</body>
|
2-й скрипт.
<html>
<head>
<title>Динамическое добавление группы полей по желанию пользователя</title>
<script language="JavaScript">
var items=1;
function AddItem() {
if (items >= 5)
return;
div=document.getElementById("items");
button=document.getElementById("add");
items++;
newitem="<span id=\"a" + items;
newitem+="\"><strong>Описание </strong>";
newitem+="<input type=\"text\" ID=\"it" + items;
newitem+="name=\"item" + items;
newitem+="\" size=\"35\">";
newitem+="<a href=\"#\" onclick=\"a('a"+ items;
newitem+="')\">удалить</a><br></span>";
newnode=document.createElement("span");
newnode.innerHTML=newitem;
div.insertBefore(newnode,button);
if (items == 5){
b('add')
}
}
function a(x){
r=document.getElementById(x);
r.parentNode.removeChild(r);
items=items-1;
if (items == 4){
document.getElementById("items").innerHTML += "<input type=\"button\" value=\"Добавить\" onClick=\"AddItem();\" ID=\"add\" class=\"b\">";
}
}
function b(x){
r=document.getElementById(x);
r.parentNode.removeChild(r); }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<form name="form1">
<div ID="items">
<span id='a1'>
<strong>Описание</strong> <input type="text" ID="it1" name="item1" size="35"><br>
</span>
<input type="button" value="Добавить" onClick="AddItem();" ID="add" class="b">
</div>
</form>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Port_Artur
(15.03.2010 в 22:56)
| | | Пытаюсь разобраться и объединить 2 скрипта написанные выше.
Не могу понять:
1. Почему не работает цикл FOR (выделенный жирным)?
for ( var i in colors )
{
newitem1+="<option value=\"" + i;
newitem1+=">"+colors[i];
newitem1+="</option>";
}
|
и
2. Почему не добавляется кнопка в функции getColors(_this)?
if (items == 1){
document.getElementById("it").innerHTML += "<input type=\"button\" value=\"Добавить\" onClick=\"AddItem();\" ID=\"add\" class=\"b\">";
}
|
<html>
<head>
<title>Динамическое добавление группы полей по желанию пользователя</title>
<script type="text/javascript">
// Данные, как бы из базы, сформированные на стороне сервера.
// Обычно находятся в подключаемом JavaScript файле.
var colorsArray = {
BentleyAzure : {red:"Красный",green:"Зеленый"},
ChevroletCorvette : {black:"Черный",blue:"Синий"},
FerrariEnzo : {green:"Зеленый",black:"Черный",yellow:"Желтый"}
}
var items=0;
// Функция, заполняющая список цветами доступными для выбранной модели.
function getColors(_this){
var colors = colorsArray[_this.value];
div=document.getElementById("items");
inp= document.getElementById("it");
items++;
newitem1="<span id=\"a" + items;
newitem1+="\"><select id=\"colors"+ items;
newitem1+=" name=\"colors"+ items;
newitem1+=">";
//цикл почему-то не работает добавляют не все цвета определённого автомобиля, а только второй.
for ( var i in colors )
{
newitem1+="<option value=\"" + i;
newitem1+=">"+colors[i];
newitem1+="</option>";
}
newitem1+="</select><br></span>";
newnode=document.createElement("span");
newnode.innerHTML=newitem1;
div.insertBefore(newnode,inp);
// Добавляем кнопку с помощью которой добиваемся диначности полей с цветами
if (items == 1){
document.getElementById("it").innerHTML += "<input type=\"button\" value=\"Добавить\" onClick=\"AddItem();\" ID=\"add\" class=\"b\">";
}
}
function AddItem() {
if (items >= 5)
return;
div=document.getElementById("items");
inp= document.getElementById("it");
items++;
newitem1="<span id=\"a" + items;
newitem1+="\"><select id=\"colors"+ items;
newitem1+=" name=\"colors"+ items;
newitem1+=">";
for(var i in colors)
{
newitem1+=" <option value=\"" + i;
newitem1+=">"+colors[i];
newitem1+="</option>";
}
newitem1+="</select>";
newitem1+="<a href=\"#\" onclick=\"a('a"+ items;
newitem1+="')\">удалить</a><br></span>";
newnode=document.createElement("span");
newnode.innerHTML=newitem1;
div.insertBefore(newnode,inp);
if (items == 4){
document.getElementById("items").innerHTML += "<input type=\"button\" value=\"Добавить\" onClick=\"AddItem();\" ID=\"add\" class=\"b\">";
}
if (items == 1){
document.getElementById("items").innerHTML += "<input type=\"button\" value=\"Добавить\" onClick=\"AddItem();\" ID=\"add\" class=\"b\">";
}
if (items == 5){
b('add')
}
}
function a(x){
r=document.getElementById(x);
r.parentNode.removeChild(r);
items=items-1;
if (items == 4){
document.getElementById("items").innerHTML += "<input type=\"button\" value=\"Добавить\" onClick=\"AddItem();\" ID=\"add\" class=\"b\">";
}
}
function b(x){
r=document.getElementById(x);
r.parentNode.removeChild(r); }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<form name="form1">
<span id='a0'>
<select id="models" name="models" onchange="getColors(this)">
<option value="BentleyAzure">Bentley Azure</option>
<option value="ChevroletCorvette">Chevrolet Corvette</option>
<option value="FerrariEnzo">Ferrari Enzo</option>
</select>
</span>
<div ID="items">
<INPUT TYPE="TEXT" ID="it" NAME="tema" SIZE="75" MAXLENGTH="70"></TD>
</div>
</form>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Port_Artur
(16.03.2010 в 22:50)
| | | 1. Добавлять поля в форму следует методом appendChild (), предварительно создавая эти поля методом createElement ().
2. Назначать скриптовые инструкции на события во вновь добавленных полях следует методами attachEvent () и addEventListener ()
3. Удалять опшены из списка (и поля из формы) следует методом removeChild (), а добавлять новые опшены в список надо методом add ().
Работать же со свойством innerHTNL, как это пытаетесь сделать вы, сейчас, когда все браузеры понимают все вышеперечисленные методы - это моветон. | |
| |
|
|
| |
|
|
| |
для: АЯ
(17.03.2010 в 02:51)
| | | Да я вообще не знаю Java. Вот и попросил объединить скрипты. Сложил из 2-х скриптов 1, как смог. Но похоже не всё сошлось. Помогите Пожалуйста доработать последний скрипт (сложенный из 2-х). У меня что -то дальше совсем никак не идёт. Вроде и ошибок не вижу и не работает.
И у Вас как то 1 и 3 пункт не совсем стыкуются то одним добавлять то другим. Ну я что-то запутался. Чем же всё таки. | |
| |
|
|
| |
|
|
| |
для: Port_Artur
(17.03.2010 в 08:34)
| | | Изменил
div.insertBefore(newnode,inp);
|
на
div.appendChild(newnode);
|
Цикл почему не работает? Вы мне так и не ответили!
for ( var i in colors )
{
newitem1+="<option value=\"" + i;
newitem1+=">"+colors[i];
newitem1+="</option>";
}
|
| |
| |
|
|
| |
|
|
| |
для: Port_Artur
(17.03.2010 в 08:51)
| | | Почему добавляемая кнопка не работает?
if (items == 1){
newitem5="<input type=\"button\" value=\"Добавить\" onClick=\"AddItem();\" ID=\"add\">";
newnode=document.createElement("span");
newnode.innerHTML=newitem5;
div.appendChild(newnode);
}
|
И по прежнему не могу понять почему цикл не работает?!
Помогите решить эти 2 проблемы.
<html>
<head>
<title>Динамическое добавление группы полей по желанию пользователя</title>
<script type="text/javascript">
// Данные, как бы из базы, сформированные на стороне сервера.
// Обычно находятся в подключаемом JavaScript файле.
var colorsArray = {
BentleyAzure : {red:"Красный",green:"Зеленый"},
ChevroletCorvette : {black:"Черный",blue:"Синий"},
FerrariEnzo : {green:"Зеленый",black:"Черный",yellow:"Желтый"}
}
var items=0;
// Функция, заполняющая список цветами доступными для выбранной модели.
function getColors(_this){
var colors = colorsArray[_this.value];
div=document.getElementById("itemss");
items++;
if (items == 1){
newitem3="<span id=\"a" + items;
newitem3+="\">"+ _this.value;
newitem3+="<br></span>";
b('a0')
newnode=document.createElement("span");
newnode.innerHTML=newitem3;
div.appendChild(newnode); }
newitem1="<span id=\"a" + items;
newitem1+="\"><select id=\"colors"+ items;
newitem1+=" name=\"colors"+ items;
newitem1+=">";
//цикл почему-то не работает добавляют не все цвета определённого автомобиля, а только второй.
for ( var i in colors )
{
newitem1+="<option value=\"" + i;
newitem1+=">"+colors[i];
newitem1+="</option>";
}
newitem1+="</select><br></span>";
newnode=document.createElement("span");
newnode.innerHTML=newitem1;
div.appendChild(newnode);
// Добавляем кнопку с помощью которой добиваемся диначности полей с цветами
if (items == 1){
newitem5="<input type=\"button\" value=\"Добавить\" onClick=\"AddItem();\" ID=\"add\">";
newnode=document.createElement("span");
newnode.innerHTML=newitem5;
div.appendChild(newnode);
}
}
function AddItem() {
if (items >= 5)
return;
div=document.getElementById("itemss");
items++;
newitem1="<span id=\"a" + items;
newitem1+="\"><select id=\"colors"+ items;
newitem1+=" name=\"colors"+ items;
newitem1+=">";
for(var i in colors)
{
newitem1+=" <option value=\"" + i;
newitem1+=">"+colors[i];
newitem1+="</option>";
}
newitem1+="</select>";
newitem1+="<a href=\"#\" onclick=\"a('a"+ items;
newitem1+="')\">удалить</a><br></span>";
newnode=document.createElement("span");
newnode.innerHTML=newitem1;
div.appendChild(newnode);
if (items == 4){
document.getElementById("items").innerHTML += "<input type=\"button\" value=\"Добавить\"
onClick=\"AddItem();\" ID=\"add\" class=\"b\">";
}
if (items == 1){
document.getElementById("items").innerHTML += "<input type=\"button\" value=\"Добавить\"
onClick=\"AddItem();\" ID=\"add\" class=\"b\">";
}
if (items == 5){
b('add')
}
}
function a(x){
r=document.getElementById(x);
r.parentNode.removeChild(r);
items=items-1;
if (items == 4){
document.getElementById("itemss").innerHTML += "<input type=\"button\" value=\"Добавить\" onClick=\"AddItem();\" ID=\"add\"
class=\"b\">";
}
}
function b(x){
r=document.getElementById(x);
r.parentNode.removeChild(r); }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<form name="form1">
<span id='a0'>
<select id="models" name="models" onchange="getColors(this);">
<option value="BentleyAzure">Bentley Azure</option>
<option value="ChevroletCorvette">Chevrolet Corvette</option>
<option value="FerrariEnzo">Ferrari Enzo</option>
</select>
</span>
<div ID="itemss">
</div>
<INPUT TYPE="TEXT" ID="it" NAME="tema" SIZE="75" MAXLENGTH="70"></TD>
</form>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Port_Artur
(17.03.2010 в 08:34)
| | | Извините, непонятно, что именно вам надо.
Пока я понял лишь следующее:.
1. Вы имеете два списка
2. Первый список статический - в нем модели автомобилей.
3. При выборе любого пункта в первом списке должен формироваться второй список - динамический , в котором появляются цвета этой конкретной модели автомобиля.
Далее - ничего не понятно.
Зачем вам кнопка с надписью "Добавить"?
Когда эта кнопка появляется? Или она всегда есть?
Что именно и куда она должна добавлять?
Напишете ПОНЯТНЫМ русским языком - помогу. | |
| |
|
|
| |
|
|
| |
для: АЯ
(17.03.2010 в 10:53)
| | | Да, первый список с автомобилями статический. При выборе автомобиля список выбора автомобилей заменяется текстовым названием автомобиля, чтобы после выбора нельзя было заменить. В это время добавляется поле с цветами автомобиля и кнопка Добавить. Возле первого поля с цветами не добавляем ссылку на его удаление "Удалить", так как меньше 1-го поля не долно быть. Возле остальных полей добавляется ссылка "Удалить" на удаление данного поля. Кнопка Добавить позволяет ещё добавлять поля с цветами автомобиля, выбранного в первом статическом поле. Максимальное количество полей с цветами 5. Если уже добавлено 5 полей то кнопка "Добавить" удаляется. Поля с цветами автомобилей можно удалять. Если полей с цветами стало меньше 5, то снова добаляем кнопку Добавить.
Если что-то не понятно - спросите поясню. | |
| |
|
|
| |
|
|
| |
для: Port_Artur
(17.03.2010 в 11:06)
| | | 1. Да, первый список с автомобилями статический. При выборе автомобиля список выбора автомобилей заменяется текстовым названием автомобиля, чтобы после выбора нельзя было заменить. -- OK
2. В это время добавляется поле с цветами автомобиля -- что значит "поле с цветами"?
"Список с цветами" - я понимаю.
А "поле с цветами" - не понимаю.
Поле - это <input>. Как в это одно поле записать целых три цвета для, например, FerrariEnzo? Вместе с русскими и английскими названиями цветов? Через пробелы, что-ли?
Мей би вы хотите раскрытый список (тег <select size="3">) c тремя опшенами? Где видимы будут сразу все три цвета по-русски (а английские значения будут записаны в их value)?
Или вам надо три подряд поля <input>? А куда тогда value из массива записывать?
Что вам надо-то? | |
| |
|
|
| |
|
|
| |
для: АЯ
(17.03.2010 в 11:50)
| | | Списки с цветами, не поля - извините я был не точен.
1 статический список с автомобилями и 5 динамических списков с цветами автомобиля, выбранного в первом статическом списке. | |
| |
|
|
| |
|
|
| |
для: Port_Artur
(17.03.2010 в 12:06)
| | | Опять ничего не понял.
Давайте определимся с терминами.
1. Список - это тег <select>
2. Внутрь тега <select> входят опшены (теги <option>), у каждого из которых есть текст (что видит пользователь) и value (которое пользователь не видит).
3. Опшенов в списке может быть любое количество - от одного и до любого разумного количества.
Ткнул ваш пользователь в первом списке на Феррари.
Я так понимаю, что у вас должен появиться второй (динамический) список с тремя опшенами, в каждом из которых будет свой свой цвет (на русском - видимый пользователю, на английском - в значении value)
Нафига вам еще 4 списка для автомобиля феррари? Что в них вы будете писать?
Может быть вы хотите добавить еще до 5-ти опшенов в открывшийся второй список?
Т.е. открылся у вас список, состоящий из трех опшенов:
Зеленый
Черный
Желтый
и вы хотите иметь возможность В ЭТОТ (один-единственный) список добавить еще и Синий, например, и Красный (довести количество опшенов в списке до максимум пяти).
Так? | |
| |
|
|
| |
|
|
| |
для: АЯ
(17.03.2010 в 12:28)
| | | Ткнул пользователь в Феррари - появляется список (на русском - видимый пользователю, на английском - в значении value) с количеством опшенов соответсвующем количеству цветов данного автомобиля. Данный список удалить нельзя но должна быть возможность добавить ещё 4 таких же списка с цветами выбранного автомобиля - для чего и нужна кнопка добавить. И вот уже эти 4 списка можно удалять для чего напротив них добавляем кнопку "Удалить". Если создали 5 списков кнопку "Добавить" удаляем. Если меньше пяти списков с цветами, - опять добавляем кнопку Добавить.
Список - это Select
Цвета - опшены.
Не заморачивайтесь Вы со смыслом - это просто пример для реализации нужного Java скрипта. | |
| |
|
|
| |
|
|
| |
для: Port_Artur
(17.03.2010 в 12:41)
| | | С циклом разобрался - пропустил " в строке
а должно быть так
newitem1+="\">"+colors[i];
|
Но вот почему добавляемая кнопка не вызывает функцию добавления ещё одного списка - понять не могу!?! | |
| |
|
|
| |
|
|
| |
для: Port_Artur
(17.03.2010 в 16:30)
| | | Как переменную colors из функции getColors передать в функцию AddItem. Или как её сделать глобальной? | |
| |
|
|
| |
|
|
| |
для: Port_Artur
(17.03.2010 в 22:17)
| | | Разобрался! Переменные надо объявлять глобальными за пределами функций, тогда всё работает.
Вопрос объединения скриптов решён.
Спасибо АЯ за помощь | |
| |
|
|
