Изменение контента по клику

@Aladriel · Регистрация: 12.12.2011

Студворк — интернет-сервис помощи студентам

Всем доброго времени суток!

Имеется выпадающий список. Необходимо реализовать следующее действие.
При клике на любой элемент списка выводится информация. В моем случае - таблица.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <script>
    function Add() {
        var o=document.getElementById('list')
        var options=new Array("Город1","Город2","Город3","Город4")
    var i,opt
        for (i=0; i<options.length; i++) {
            opt=document.createElement('option')
            opt.innerHTML=options[i]
            o.appendChild(opt)
        }
    }
    </script>
    </head>
    <body onload='Add()'>
    <select id='list'>
    </select>
    </body> </html>

То есть если я выбираю значение "Город1", то ниже должна отобразиться таблица с данными по городу1.
В приведенном коде имеется только список. Таблицы не добавляла. Прошу советы, как это можно реализовать.

@ayrat_net · 12.12.2011, 13:51

С удовольствием бы помог, но скорее всего тебе все равно пришлось бы переделывать.
Суть в следующем:
При загрузке страницы с сервера из хранилища должна загрузиться вся информация как города так и информация о них. Это не плохая затея если у тя несколько городов. А если у тебя много городов то эта затея очень затратна в плане производительности. Так что перед тем как ты сейчас будешь разбирать этот код мне кажется тебе следует подумать об AJAX. а потом и спросишь ответ на свой вопрос.

@Aladriel · 12.12.2011, 13:53 **[ТС]**

Мне нужно делать это на JS. И это не на серверах хранится. Городов будет порядка 20 штук. Думаю не накладно для JS. Если не сложно помогите.

@GuardCat · 13.12.2011, 10:59

Вот простой вариант реализации задачи. Добавляю не таблицу, а элемент p. Кроме того, в вашем коде я изменил следующее:
1. Добавляю value каждому элементу option.
2. Убрал атрибут onload из тега body и перенёс его в зону скриптов.
3. Косметические доделки.
Если делать всерьёз, нужно делать без глобального массива. Как пример вполне жизнеспособно.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
        <script>
            window.onload = function () {
                add();
                document.getElementById('list').onchange = function () {
                    showInfo(+this.value);
                }
                document.getElementById('list').onchange();
            }
            var cityInformation = [
                "Город 1 — прекрасное поселение на берегу реки Грязнушки, на живописном, утыканном кривыми сосёнками топком иле, нанесённом этой великой микрорекой.",
                "Город 2 — деревушка где-то на окраине Европы.",
                "Город 3 — отличный город с прекрасным памятником его основателю (имя, к сожалению. утрачено).",
                "Город 4 — город, которых мало. И больше их не надо."
            ]
            function add() {
                var o = document.getElementById('list')
                var options = new Array("Город1", "Город2", "Город3", "Город4")
                var i, opt;
                for (i = 0; i < options.length; i++) {
                    opt = document.createElement('option');
                    opt.innerHTML = options[i];
                    opt.value = i;
                    o.appendChild(opt)
                }
            }
            function showInfo (value) {
                var p = document.createElement("p");
                var informer = document.querySelector("#cityInfo");
                if (!informer) {
                    p.id = "cityInfo";
                    p.class = "cityInformer";
                    document.body.appendChild(p);
                }
                informer = document.querySelector("#cityInfo");
                informer.innerHTML = cityInformation[value];
            }
        </script>
    </head>
    <body>
        <select id='list'>
        </select>
    </body>
</html>

Пожалуйста, обратите внимание на отступы и точки с запятыми. Это необязательная часть работы с кодом и разметкой, но важная с точки зрения правил хорошего тона.

@Aladriel · 13.12.2011, 12:01 **[ТС]**

GuardCat, Огромное спасибо за Вашу помощь! Именно то, что мне нужно было!
Так же благодарю за замечания по поводу оформления!

@Aladriel · 14.12.2011, 13:25 **[ТС]**

кстати под IE не работает((( Есть вариант как изменить? Нужно только под IE...

@GuardCat · 14.12.2011, 13:37

Блин косяк. Вроде проверял же. Замените

JavaScript
1
p.class = "cityInformer";

на

JavaScript
1
p.className = "cityInformer";

@Aladriel · 14.12.2011, 14:21 **[ТС]**

Изменила, как самостоятельный скрипт - работает, а в моем странице не хочет. Возможно из-за структуры... ТО есть позволяет выбрать город, но не выводит информацию...

Добавлено через 30 минут
GuardCat, Выводит такую вот ошибку
Сведения об ошибке на веб-странице

Агент пользователя: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; MRA 5.9 (build 4876); MRA 5.7 (build 03797); SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C)
штамп времени: Wed, 14 Dec 2011 10:17:22 UTC

Сообщение: Объект не поддерживает это свойство или метод
Строка: 34
Символ: 33
Код: 0
URI-код: file:///C:/ItsKaz/StartCab/StartCab/Start.htm

Вот 34 строка, 33 символ "v"
var informer = document.querySelector("#cityInfo");

в чем может быть дело?

@GuardCat · 14.12.2011, 15:56

Странно как-то, вроде есть селекторы в IE. Ну Ok, вот код без селекторов, плюс немного оптимизации. Проверено в Chrome 16 и IE8

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
window.onload = function () {
        add();
        document.getElementById('list').onchange = function () {
                showInfo(+this.value);
        }
        document.getElementById('list').onchange();
}
var cityInformation = [
        "Город 1 — прекрасное поселение на берегу реки Грязнушки, на живописном, утыканном кривыми сосёнками топком иле, нанесённом этой великой микрорекой.",
        "Город 2 — деревушка где-то на окраине Европы.",
        "Город 3 — отличный город с прекрасным памятником его основателю (имя, к сожалению. утрачено).",
        "Город 4 — город, которых мало. И больше их не надо."
]
function add() {
        var o = document.getElementById('list')
        var options = new Array("Город1", "Город2", "Город3", "Город4")
        var i, opt;
        for (i = 0; i < options.length; i++) {
                opt = document.createElement('option');
                opt.innerHTML = options[i];
                opt.value = i;
                o.appendChild(opt)
        }
}
function showInfo (value) {
        var p = document.createElement("p");
        var informer = document.getElementById("cityInfo");
        if (!informer) {
                p.id = "cityInfo";
                p.className = "cityInformer";
                document.body.appendChild(p);
                informer = p;
        }
        informer.innerHTML = cityInformation[value];
}

@Aladriel · 15.12.2011, 07:34 **[ТС]**

GuardCat , спасибо! Теперь выводит инфу.. Только не там где нужно... Сам список у меня в <DIV> сидит, а элемент выводится в верху страницы. Как сделать чтобы элемент в том же <DIV> отображался?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div id=Grp_Learn class=Grp>
<p class=GrpHead><img align=absmiddle src=cpicok.gif>  <b>Список сертифицированных центров обучения</b></p>
<table cellSpacing="0" width="75%" border="0" style="font-size: 10pt;">
<tr>
<td>
<select id='list'>
</select>
</td>
</tr>
</table>
        
</div>

Вот тут кусок кода, где описывается ДИВ со списком. Помогите еще раз, пожалуйста! Горят сроки!

@GuardCat · 15.12.2011, 09:54

Вот эту строку в самом начале, сразу после тега script, не вкладывая ни в какие функции:

JavaScript
1
var recipientBlock;

Делать переменную глобальной не комильфо, но раз важно время...
И вот в двух местах корректировка:

JavaScript
1
2
3
4
5
6
7
8
window.onload = function () {
    add();
    document.getElementById('list').onchange = function () {
        showInfo(+this.value);
    }
    document.getElementById('list').onchange();
    recipientBlock = document.getElementById('Grp_Learn'); // добавили это   
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
function showInfo (value) {
    var p = document.createElement("p");
    var informer = document.getElementById("cityInfo");
    if (!informer) {
        p.id = "cityInfo";
        p.className = "cityInformer";
        recipientBlock.appendChild(p);// изменили тут
        informer = p;
    }
    informer.innerHTML = cityInformation[value];
}

И это... Все параметры тегов возмите в кавычки. Во всём HTML. Т.е. не «<div id=Grp_Learn class=Grp>», а «<div id="Grp_Learn" class="Grp">».

Отпишитесь по результатам!

@Aladriel · 15.12.2011, 10:21 **[ТС]**

GuardCat, все сделал как вы указали.
Появилась новая ошибка.

Сведения об ошибке на веб-странице

Сообщение: 'recipientBlock' - есть null или не является объектом
Строка: 40
Символ: 33
Код: 0
URI-код: file:///C:/ItsKaz/StartCab/StartCab/Start.htm

В этой строке:

Java
1
recipientBlock.appendChild(p);

Добавлено через 8 минут
Как следствие данные не выводятся вообще нигде...

@GuardCat · 15.12.2011, 10:36

1. В window.onload точно есть строка «recipientBlock = document.getElementById('Grp_Learn');» и строка «var recipientBlock;» точно в самом начале и не относится ни к каким функциям ?
2. div, куда должны выводиться данные, статический (руками в коде прописан), а не динамический?
3. id вашего div точно уникально в пределах страницы (никакой другой элемент на странице не имеет такого id)?
4. Если на первые три вопроса — «да», тогда я не знаю уже, что за капризы у вашего интерпретатора и давайте попробуем так: откатите все изменения, которые сделали сегодня. Внесите одно изменение в одну функцию:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
function showInfo (value) {
        var p = document.createElement("p");
        var informer = document.getElementById("cityInfo");
        if (!informer) {
                p.id = "cityInfo";
                p.className = "cityInformer";
                document.getElementById('Grp_Learn').appendChild(p);// изменили тут
                informer = p;
        }
        informer.innerHTML = cityInformation[value];
}

@Aladriel · 15.12.2011, 10:51 **[ТС]**

GuardCat, Все заработало!!! Наконец-то! Огромное спасибо!

@Aladriel · 21.12.2011, 15:12 **[ТС]**

GuardCat, можно еще вопрос?
Как изменить скрипт, чтобы в другой части документа (<div id="Grp_Partner">), был список с другими городами и привязкой к другому массиву данных?
я с JS не очень дружу, поэтому не получается.
Вот что я натворила:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 <script>
           
              window.onload = function () {
                add();
                document.getElementById('list').onchange = function () {
                                showInfo(+this.value);
                }
                  document.getElementById('list2').onchange = function () {
                                showInfo(+this.value);
                }
                document.getElementById('list').onchange();
                document.getElementById('list2').onchange();
                
}
var cityInformation =["1", "2","3"]
var PartnerInformation = ["11","22","33"]
function add() {
                var o = document.getElementById('list')
                var o2 = document.getElementById('list2')
                var options = new Array("gor1","go2","")
                var options2 = new Array("p1","p2","p3")
                var i, opt,j,opt2;
                for (i = 0; i < options.length; i++) {
                                opt = document.createElement('option');
                                opt.innerHTML = options[i];
                                opt.value = i;
                                o.appendChild(opt)
                }
                 for (j = 0; j < options2.length; j++) {
                                opt2 = document.createElement('option2');
                                opt2.innerHTML = options2[j];
                                opt2.value = j;
                                o2.appendChild(opt2)
                }
}
function showInfo (value) {
        var p = document.createElement("p");
        var p2 = document.createElement("p2");
        var informer = document.getElementById("cityInfo");
        var informer2 = document.getElementById("PartnerInfo");
        if (!informer) {
                p.id = "cityInfo";
                p.className = "cityInformer";
                document.getElementById('Grp_Learn').appendChild(p);// изменили тут
                informer = p;
        }
         if (!informer2) {
                p2.id = "PartnerInfo";
                p2.className = "PartnerInformer";
                document.getElementById('Grp_Partner').appendChild(p2);// изменили тут
                informer2 = p2;
        }
        informer.innerHTML = cityInformation[value];
        informer2.innerHTML = PartnerInformation[value];
}
                </script>

Можно ли так делать или как по-другому?

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@ayrat_net 84 / 84 / 12 Регистрация: 12.01.2011 Сообщений: 1,049
	12.12.2011, 13:51
	С удовольствием бы помог, но скорее всего тебе все равно пришлось бы переделывать. Суть в следующем: При загрузке страницы с сервера из хранилища должна загрузиться вся информация как города так и информация о них. Это не плохая затея если у тя несколько городов. А если у тебя много городов то эта затея очень затратна в плане производительности. Так что перед тем как ты сейчас будешь разбирать этот код мне кажется тебе следует подумать об AJAX. а потом и спросишь ответ на свой вопрос. 0

@Aladriel 25 / 18 / 2 Регистрация: 12.12.2011 Сообщений: 76
	12.12.2011, 13:53 [ТС]
	Мне нужно делать это на JS. И это не на серверах хранится. Городов будет порядка 20 штук. Думаю не накладно для JS. Если не сложно помогите. 0

@Aladriel 25 / 18 / 2 Регистрация: 12.12.2011 Сообщений: 76
	13.12.2011, 12:01 [ТС]
	GuardCat, Огромное спасибо за Вашу помощь! Именно то, что мне нужно было! Так же благодарю за замечания по поводу оформления! 0

@Aladriel 25 / 18 / 2 Регистрация: 12.12.2011 Сообщений: 76
	14.12.2011, 13:25 [ТС]
	кстати под IE не работает((( Есть вариант как изменить? Нужно только под IE... 0

@Aladriel 25 / 18 / 2 Регистрация: 12.12.2011 Сообщений: 76
	14.12.2011, 14:21 [ТС]
	Изменила, как самостоятельный скрипт - работает, а в моем странице не хочет. Возможно из-за структуры... ТО есть позволяет выбрать город, но не выводит информацию... Добавлено через 30 минут GuardCat, Выводит такую вот ошибку Сведения об ошибке на веб-странице Агент пользователя: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; MRA 5.9 (build 4876); MRA 5.7 (build 03797); SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C) штамп времени: Wed, 14 Dec 2011 10:17:22 UTC Сообщение: Объект не поддерживает это свойство или метод Строка: 34 Символ: 33 Код: 0 URI-код: file:///C:/ItsKaz/StartCab/StartCab/Start.htm Вот 34 строка, 33 символ "v" var informer = document.querySelector("#cityInfo"); в чем может быть дело? 0

@Aladriel 25 / 18 / 2 Регистрация: 12.12.2011 Сообщений: 76
	15.12.2011, 10:51 [ТС]
	GuardCat, Все заработало!!! Наконец-то! Огромное спасибо! 0