Действие сразу над двумя элементами - JavaScript, Ajax

Дима_Б · 30.11.2015, 23:04

Здравствуйте, я в отчаянии

Нужно чтобы по действию onchange происходили изменения в двух других элементах. Всё работает как мне надо через onchange=getElementById, но только с одним элементом. Читал про другие способы влияния действием на группу элементов - ничего не работает. Объединить элементы в один я не могу, повлиять на свойство их обоих тоже. Пара бессонных ночей ни к чему не привела.

Но надо оч. Спасите.

Код:

head
meta charset="UTF-8" meta>
body bgcolor="grey"</body>
title>Время</title>
legend>Выберете ветку метро</legend>
select>
onchange="document.getElementsByClassName('1').style.display='';">
option disabled>Выбор ветки</option>
option value="grey">Серпухо-Тимирязевская</option>
option value="brown">Кольцевая</option>
option value="red">Сокольническая</option>
/select>

select> class="1"style='display: none;'>
option disabled>От</option>
option value="work">Цветной бульвар</option>
option value="pab">Менделеевская</option>
option value="home">Савеловская</option>
/select>

select> class="1"style='display: none;'>
option disabled>До</option>
option value="work">Цветной бульвар</option>
option value="pab">Менделеевская</option>
option value="home">Савеловская</option>
/select>

Fenex · 01.12.2015, 08:49

Код:

<script>
    function changed() {
        document.getElementsByClassName('1')[0].style.display='';
        document.getElementsByClassName('2')[0].style.display='';
    }
</script>
<select onchange="changed()">
  <option disabled>Выбор ветки</option>
  <option value="grey">Серпухо-Тимирязевская</option>
  <option value="brown">Кольцевая</option>
  <option value="red">Сокольническая</option>
</select>

SQLPowerUser · 01.12.2015, 09:48

Код HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Время</title>
<style>
#from, #to {display:none;}
</style>
</head>
<body>
<legend>Выберете ветку метро</legend>
<select id="main" onchange="choose(this);">
  <option disabled>Выбор ветки</option>
  <option value="grey">Серпухо-Тимирязевская</option>
  <option value="brown">Кольцевая</option>
  <option value="red">Сокольническая</option>
</select>

<select id="from">
  <option disabled>От</option>
</select>

<select id="to">
  <option disabled>До</option>
</select>

<script>
function gid(i) {return document.getElementById(i);}
var main = gid('main'), from = gid('from'), to = gid('to');
main.selectedIndex = 0;
from.selectedIndex = 0;
to.selectedIndex = 0;

var stan = {
  1:['Алтуфьево','Бибирево','Отрадное','Владыкино','Петровско-Разумовская','Тимирязевская','Дмитровская'],
  2:['Киевская','Краснопресненская','Белорусская','Новослободская','Проспект Мира','Комсомольская'],
  3:['Преображенская площадь','Сокольники','Красносельская','Комсомольская','Красные ворота','Чистые пруды','Лубянка']
}

function choose(el) {
  var arr = stan[el.selectedIndex], i=0;
  from.options.length = 1; to.options.length = 1;
  for (i=1; i<=arr.length; i++) {
    from.options[i] = new Option(arr[i-1],i);
    to.options[i] = new Option(arr[arr.length-i],i);
  }
  
  from.style.display = 'inline';
  to.style.display = 'inline';
  from.selectedIndex = 0; to.selectedIndex = 0;
}
</script>
</body>
</html>

Naive · 01.12.2015, 11:17

Цитата:

Сообщение от Fenex

Код:

<script>
    function changed() {
        document.getElementsByClassName('1')[0].style.display='';
        document.getElementsByClassName('2')[0].style.display='';
    }
</script>
<select onchange="changed()">
  <option disabled>Выбор ветки</option>
  <option value="grey">Серпухо-Тимирязевская</option>
  <option value="brown">Кольцевая</option>
  <option value="red">Сокольническая</option>
</select>

У топикстартера одинаковый класс, так что...

Код:

        document.getElementsByClassName('1')[0].style.display='';
        document.getElementsByClassName('1')[1].style.display='';

или

Код:

[].forEach.call(document.getElementsByClassName('1'), function(el){ 
    el.style.display = '';
});

Дима_Б · 01.12.2015, 23:28

О, спасибо! Заработало!! )))
Я ладно ещё приду потом? )

Цитата:

У топикстартера одинаковый класс, так что...
Код:

document.getElementsByClassName('1' )[0].style.display='';
document.getElementsByClassName('1' )[1].style.display='';

Не, работает правильно именно с нулями в квадратных скобках.

Fenex · 01.12.2015, 23:58

Цитата:

Сообщение от Дима_Б

Не, работает правильно именно с нулями в квадратных скобках.

Naive, видал какой я скилловый экстрасенс?)

Дима_Б · 02.12.2015, 00:11

SQLPowerUser,
если будет немного времени, разъясните мне почему Ваши функции работают, я не могу этого понять (((

Про функцию в функции и массив ясно, но вот что за i и как это работает - увы...
Без понимания, просто переписав чужой код, я не могу завершить свою задумку.

from.options.length = 1; to.options.length = 1;
for (i=1; i<=arr.length; i++) {
from.options[i] = new Option(arr[i-1],i);
to.options[i] = new Option(arr[arr.length-i],i);

come-on · 02.12.2015, 00:19

Где там "функцию в функции"?

SQLPowerUser · 02.12.2015, 09:28

>>> from.options.length = 1; to.options.length = 1;
options.length - это количество строк в списке. Если сделать options.length = 0, то список очистится. В нашем случае надо оставить 1-й пункт (где строки "От" и "До"), поэтому options.length = 1.

В этом блоке
for (i=1; i<=arr.length; i++) {
from.options[i] = new Option(arr[i-1],i);
to.options[i] = new Option(arr[arr.length-i],i);
идёт перебор массива и добавление новых строк в список через new Option

А вообще, массивы в моём решении являются всего лишь частью объекта https://learn.javascript.ru/object
var stan = {
1:['Алтуфьево','Бибирево','Отрадное',' Владыкино','Петровско-Разумовская','Тимирязевская','Дмитр овская'],
2:['Киевская','Краснопресненская','Бел орусская','Новослободская','Проспек т Мира','Комсомольская'],
3:['Преображенская площадь','Сокольники','Красносельск ая','Комсомольская','Красные ворота','Чистые пруды','Лубянка']
}
Здесь цифры 1,2,3 - не просто так. Смотрим изначальный список

Код HTML:

<select id="main" onchange="choose(this);">
  <option disabled>Выбор ветки</option>
  <option value="grey">Серпухо-Тимирязевская</option>
  <option value="brown">Кольцевая</option>
  <option value="red">Сокольническая</option>
</select>

В HTML-структуре
<select>

<option> ... </option>

</select>
нумерация пунктов, как обычно, идет с нуля. У самого первого пункта "Выбор ветки" индекс у option = 0.
У "Серпухо-Тимирязевская" индекс = 1, у "Кольцевая" индекс = 2, у "Сокольническая" = 3.
Этот индекс мы получаем в самом начале через
var arr = stan[el.selectedIndex]
Теперь мы знаем циферку, можно разбирать соответствующий массив. В общем, ещё раз рекомендую почитать https://learn.javascript.ru/object

Naive · 02.12.2015, 11:34

Цитата:

Сообщение от Fenex

Naive, видал какой я скилловый экстрасенс?)

бывает)
но таки на моей верстке все работало)

30.11.2015, 23:04	#1
Дима_Б Регистрация: 30.11.2015 Сообщений: 4	Действие сразу над двумя элементами Здравствуйте, я в отчаянии Нужно чтобы по действию onchange происходили изменения в двух других элементах. Всё работает как мне надо через onchange=getElementById, но только с одним элементом. Читал про другие способы влияния действием на группу элементов - ничего не работает. Объединить элементы в один я не могу, повлиять на свойство их обоих тоже. Пара бессонных ночей ни к чему не привела. Но надо оч. Спасите. Код: head meta charset="UTF-8" meta> body bgcolor="grey"</body> title>Время</title> legend>Выберете ветку метро</legend> select> onchange="document.getElementsByClassName('1').style.display='';"> option disabled>Выбор ветки</option> option value="grey">Серпухо-Тимирязевская</option> option value="brown">Кольцевая</option> option value="red">Сокольническая</option> /select> select> class="1"style='display: none;'> option disabled>От</option> option value="work">Цветной бульвар</option> option value="pab">Менделеевская</option> option value="home">Савеловская</option> /select> select> class="1"style='display: none;'> option disabled>До</option> option value="work">Цветной бульвар</option> option value="pab">Менделеевская</option> option value="home">Савеловская</option> /select> Последний раз редактировалось Аватар; 01.12.2015 в 08:56.

02.12.2015, 09:28	#9
SQLPowerUser Форумчанин Регистрация: 19.01.2015 Сообщений: 158	>>> from.options.length = 1; to.options.length = 1; options.length - это количество строк в списке. Если сделать options.length = 0, то список очистится. В нашем случае надо оставить 1-й пункт (где строки "От" и "До"), поэтому options.length = 1. В этом блоке for (i=1; i<=arr.length; i++) { from.options[i] = new Option(arr[i-1],i); to.options[i] = new Option(arr[arr.length-i],i); идёт перебор массива и добавление новых строк в список через new Option А вообще, массивы в моём решении являются всего лишь частью объекта https://learn.javascript.ru/object var stan = { 1:['Алтуфьево','Бибирево','Отрадное',' Владыкино','Петровско-Разумовская','Тимирязевская','Дмитр овская'], 2:['Киевская','Краснопресненская','Бел орусская','Новослободская','Проспек т Мира','Комсомольская'], 3:['Преображенская площадь','Сокольники','Красносельск ая','Комсомольская','Красные ворота','Чистые пруды','Лубянка'] } Здесь цифры 1,2,3 - не просто так. Смотрим изначальный список Код HTML: <select id="main" onchange="choose(this);"> <option disabled>Выбор ветки</option> <option value="grey">Серпухо-Тимирязевская</option> <option value="brown">Кольцевая</option> <option value="red">Сокольническая</option> </select> В HTML-структуре <select> <option> ... </option> <option> ... </option> </select> нумерация пунктов, как обычно, идет с нуля. У самого первого пункта "Выбор ветки" индекс у option = 0. У "Серпухо-Тимирязевская" индекс = 1, у "Кольцевая" индекс = 2, у "Сокольническая" = 3. Этот индекс мы получаем в самом начале через var arr = stan[el.selectedIndex] Теперь мы знаем циферку, можно разбирать соответствующий массив. В общем, ещё раз рекомендую почитать https://learn.javascript.ru/object Последний раз редактировалось SQLPowerUser; 02.12.2015 в 12:03.

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
действие над файлами {pascal}	backspace567	Паскаль, Turbo Pascal, PascalABC.NET	1	11.11.2012 18:41
Как работать с двумя базами сразу	Kingson	Microsoft Office Access	1	09.08.2011 18:58
Двумерный массив, и действие над ним...	Neksion	Помощь студентам	9	01.12.2010 10:11
Операция над элементами со списка	b1otekk	Microsoft Office Excel	1	02.06.2010 01:59
Операции над максимальными элементами масссива ( С )	Dest	Общие вопросы C/C++	4	14.05.2009 17:50

02.12.2015, 00:11	#7
Дима_Б Регистрация: 30.11.2015 Сообщений: 4	SQLPowerUser, если будет немного времени, разъясните мне почему Ваши функции работают, я не могу этого понять ((( Про функцию в функции и массив ясно, но вот что за i и как это работает - увы... Без понимания, просто переписав чужой код, я не могу завершить свою задумку. from.options.length = 1; to.options.length = 1; for (i=1; i<=arr.length; i++) { from.options[i] = new Option(arr[i-1],i); to.options[i] = new Option(arr[arr.length-i],i);

02.12.2015, 00:19	#8
come-on Участник клуба Регистрация: 21.10.2015 Сообщений: 1,361	Где там "функцию в функции"?