Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:
RSS
ВКонтакте

Почтовая рассылка

Подписчиков: -1
Последний выпуск: 19.06.2015

Обработка селектов с помощью JavaScript

Web программирование
21K
19 июля 2007 года
BerdArt
10 / / 30.03.2007
Есть такие два селекта: один содержит название разделов, а другой названия подразделов. Задача: при выборе названия из первого селекта надо, чтобы во втором остались только подразделы, входящие в выбраный раздел. Т.к. на РНР это сделать неудобно (нехочу, чтобы страница перезагружалась), решил сделать на JavaScript. Получился такой код:
Свернуть исходник 
Код:
<script language="JavaScript"> <!--
function check(val)
{
    var scat=document.forms["add_prod"].subcat;
       
    for (var i=0; i<scat.length; i++)
        if (scat.id==val) scat.style.display="block";
    else if (scat.value=="") scat.style.display="block"; else  scat.style.display="none";
}
//--></script>

......

<form method=post action="./?page=handler_form"  name="add_prod"><br>
.....
Раздел:
<SELECT name=category id=category
            &#111;&#110;change="check(this.options[this.selectedIndex].value)">
<OPTION value="">Выберите раздел...</OPTION>
<OPTION =1>...</OPTION>
<!-- из таблицы MySQL выбираются названия разделов и в значения value вставляются номера разделов  -->
</SELECT>
           
Подраздел:
<SELECT name=subcat id=subcat>
<OPTION value="" style="display: block">Выберите подраздел...</OPTION>
<OPTION id=1 value=1>...</OPTION>
<!-- из другой таблицы MySQL выбираются названия подразделов, в id помещен номер раздела, в который входит данный подраздел, а в value помещается номер подраздела -->
</SELECT>
...


Так вот это все работает только в Firefox, а в InternetExplorer и Opera в селекте Подраздел видимых изменений не происходит. Хотя с помощью алертов я установил что стили устанавливаются, т.е. яваскрипт срабатывает везде нормально, но все равно все значения второго раздела видны.

ЗЫ. Если во втором селекте подразделы объединить в группы с помощью тега <OPTGROUP label="название_раздела" id="номер_раздела">, то как в яваскрипте обратиться к этим тегам, чтобы изменить их видимость.

Заранее спасибо. С уважением, BerdArt.
По порядку
Сначала полезные
Сначала решения

4 ответа

312
19 июля 2007 года
dead_star
392 / / 26.11.2006
вот примерный код
[HTML]
<Html>
<Head>
<Script Language="JavaScript">
var maxLength = 20;
website = new Array;
website[1] = "Категория - 1";
website[2] = "Категория - 2";
website[3] = "Категория - 3";
website[4] = "Категория - 4";

var trueLength = website.length;
var lst = website.length;

url = new Array;
url[1] = "http://kimsite.narod.ru/webmaster/";
url[2] = "http://kimsite.narod.ru/webmaster/";
url[3] = "http://kimsite.narod.ru/webmaster/";
url[4] = "http://kimsite.narod.ru/webmaster/";

ccselect = new Array;
ccselect[1] = "Категория - 1";
ccselect[2] = "Категория - 2";
ccselect[3] = "Категория - 3";
ccselect[4] = "Категория - 4";

function changePage(){
menuNum = document.ccDoubleList.ccBitsyG.selectedIndex;
if (menuNum == null){
alert("Please select a category from the menu.");
return;
} else {
i = document.ccDoubleList.ccDoubleZ.selectedIndex;
window.location.href = url;
}
}

function changeMenu(){
website.length = 1;
menuNum = document.ccDoubleList.ccBitsyG.selectedIndex;
f = document.ccDoubleList.myText;
f.value = menuNum;
if (menuNum == null) return;
if (menuNum == 0){
website = new Array;
website[0] = new Option("Пункт 1.0");
website[1] = new Option("Пункт 1.1");
website[2] = new Option("Пункт 1.2");
website[3] = new Option("Пункт 1.3");
website[4] = new Option("Пункт 1.4");
website[5] = new Option("Пункт 1.5");
url = new Array;
url[0] = "http://kimsite.narod.ru/webmaster/";
url[1] = "http://kimsite.narod.ru/webmaster/";
url[2] = "http://kimsite.narod.ru/webmaster/";
url[3] = "http://kimsite.narod.ru/webmaster/";
url[4] = "http://kimsite.narod.ru/webmaster/";
url[5] = "http://kimsite.narod.ru/webmaster/";
}
if (menuNum == 1){
website = new Array;
website[0] = new Option("Пункт 2.0");
website[1] = new Option("Пункт 2.1");
website[2] = new Option("Пункт 2.2");
website[3] = new Option("Пункт 2.3");
website[4] = new Option("Пункт 2.4");
website[5] = new Option("Пункт 2.5");
url = new Array;
url[0] = "http://kimsite.narod.ru/webmaster/";
url[1] = "http://kimsite.narod.ru/webmaster/";
url[2] = "http://kimsite.narod.ru/webmaster/";
url[3] = "http://kimsite.narod.ru/webmaster/";
url[4] = "http://kimsite.narod.ru/webmaster/";
url[5] = "http://kimsite.narod.ru/webmaster/";
}

if (menuNum == 3){
website = new Array;
website[1] = new Option("Пункт 3.1");
website[2] = new Option("Пункт 3.2");
website[3] = new Option("Пункт 3.3");
website[4] = new Option("Пункт 3.4");
website[5] = new Option("Пункт 3.5");
url = new Array;
url[1] = "http://kimsite.narod.ru/webmaster/";
url[2] = "http://kimsite.narod.ru/webmaster/";
url[3] = "http://kimsite.narod.ru/webmaster/";
url[4] = "http://kimsite.narod.ru/webmaster/";
url[5] = "http://kimsite.narod.ru/webmaster/";
}

if (menuNum == 4){
website = new Array;
website[1] = new Option("Пункт 4.1");
website[2] = new Option("Пункт 4.2");
website[3] = new Option("Пункт 4.3");
website[4] = new Option("Пункт 4.4");
website[5] = new Option("Пункт 4.5");
url = new Array;
url[1] = "http://kimsite.narod.ru/webmaster/";
url[2] = "http://kimsite.narod.ru/webmaster/";
url[3] = "http://kimsite.narod.ru/webmaster/";
url[4] = "http://kimsite.narod.ru/webmaster/";
url[5] = "http://kimsite.narod.ru/webmaster/";
}

tot = website.length;
for (i = lst; i > 0; i--){
document.ccDoubleList.ccDoubleZ.options = null;
}
for (i = 0; i < tot; i++){
document.ccDoubleList.ccDoubleZ.options = website;
}
document.ccDoubleList.ccDoubleZ.options[1].selected = true;
lst = website.length;
}
</Script>
</Head>
<Body BgColor="#ffffff">
<Script Language="JavaScript">
with (document){
writeln('<Center>');
writeln('<Table Border=0 CellSpacing=0 CellPadding=3>');
writeln('<Tr><Form Name="ccDoubleList"><Td Align=Left>');
writeln('<Font Face=Verdana,Tahoma,Arial Size=2 Color=#000000><B>Категория</B></Font><Br>');
writeln('<Select Name="ccBitsyG" onChange="changeMenu(this.form)">');
tot = ccselect.length;
for (i = 1; i < tot; i++)
writeln("<option>" + ccselect);
writeln("</Select>");
writeln('</Td><Td>');
writeln('<Font Face=Verdana,Tahoma,Arial Size=2 Color=#000000><B>Меню</B></Font><Br>');
writeln('<Select Name="ccDoubleZ">');
for (i = 1; i < maxLength; i++)
writeln("<OPTION>" + website);
writeln("</Select>");
for (i = maxLength; i > trueLength; i--){
ccDoubleList.ccDoubleZ.options = null;
}
writeln('</Td><Td Valign=bottom><A Href="java script:changePage();">go</A>');
writeln('<input type="text" name="myText">');
writeln('</Td></Tr>');
changeMenu();
writeln('</Form>');
writeln('</Table>');
writeln('</Center>');
}
</Script>
</Body>
</Html>
[/HTML]
21K
19 июля 2007 года
BerdArt
10 / / 30.03.2007
У меня названия разделов и подразделов заранее не известны. Они берутся из БД MySQL.
312
19 июля 2007 года
dead_star
392 / / 26.11.2006
Цитата: BerdArt
У меня названия разделов и подразделов заранее не известны. Они берутся из БД MySQL.



я тебе дал Java код. Ты пишеш php код который формирует уже этот JavaScript, который в свою очередь формирует тот визуальный эфект который тебе нужен.

PS я один раз такое уже деле. могу сказать сразу, геморно, но возможно.

6.7K
21 июля 2007 года
svd
31 / / 17.12.2005
Также можно с помощью методов getAttribute и setAttribute
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог