VPF::select - Форум программистов

EmilRegis

Дата 11.1.2010, 13:21 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 306
Регистрация: 21.9.2007

Репутация: 3
Всего: 4

Здравствуйте...
Делаю несколько селектов для выбора страны, области, города и т.д.

Код


<table id="seltableid">
    <tr class="classcountry">
        <td>Страна:    </td>
        <td name="seltd">
            <select name="selcountry" id="selcountry" onchange="selchange(this.id)">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </td>
    </tr>
    <tr class="classobl">
        <td>Область:    </td>
        <td name="seltd">
            <select name="selobl" id="selobl" onchange="selchange(this.id)">
            </select>
        </td>
    </tr>
    <tr class="classcity">
        <td>Город:    </td>
        <td name="seltd">
            <select name="selcity" id="selcity" onchange="selchange(this.id)">
            </select>
        </td>
    </tr>
</table>

можно ли как-то в dom'е сделать так, чтобы при выборе одного селекта все последующие за ним скрывались?

Это сообщение отредактировал(а) EmilRegis - 11.1.2010, 15:33

comcon1

Дата 11.1.2010, 15:01 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 838
Регистрация: 11.6.2005
Где: Москва ДАС-МГУ

Репутация: 0
Всего: 17

Конечно можно. Только зачем после выбора страны скрывать селект с выбором города?

--------------------

comcon1 on twitter

Amphiluke

Дата 11.1.2010, 15:10 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112

Может, имелось в виду, что сокрытие нижележащих списков должно происходить только при выпадании меню в вышележащем select'е, а потом после совершения выбора всё восстанавливалось? smile

EmilRegis

Дата 11.1.2010, 15:30 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 306
Регистрация: 21.9.2007

Репутация: 3
Всего: 4

да ошибся)) я имел ввиду, чтобы скрывались все селекты идущие за следующим после выбранного...То есть если выбрана страна, то скрывались все селекты, начиная с города...
Сделал так

Код


var a = [1,22,3,4,5,6,7,87];
    function selchange(sel_id){
        var seltd = document.getElementsByName("seltd");
        var flag=0; //flag==0 - для выбранного селекта и предыдущих, flag==1 - для селекта, следующего за выбранным, flag==2 - для всех остальных селектов
        for (var i = 0; i < seltd.length; i++){
            var cur=seltd[i].childNodes.item(1);
            if (cur.nodeName.toLowerCase() == "select"){
                if (cur.id==sel_id){
                    cur.parentNode.parentNode.style.visibility = "visible";
                    flag = 1;
                } 
                else{
                    if (flag !=0){
                        cur.innerHTML = '';
                        if (flag == 2) cur.parentNode.parentNode.style.visibility = "hidden";
                        if(flag == 1){
                            for(var j=0;j<a.length;j++){
                                var option = document.createElement('option');
                                option.value = a[j];
                                option.innerHTML = a[j];
                                cur.appendChild(option);
                            }
                            cur.parentNode.parentNode.style.visibility = "visible";
                            flag = 2;
                        }
                    }
                }
            }
        }
    }

но что-то мне не особо нравится такой вариант((

M
12345c

Поправил тип кода

Это сообщение отредактировал(а) 12345c - 11.1.2010, 18:22

comcon1

Дата 11.1.2010, 15:40 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 838
Регистрация: 11.6.2005
Где: Москва ДАС-МГУ

Репутация: 0
Всего: 17

Твой вариант делает явно что-то еще (; Напиши, что, плиз.

А насчет скрытия: у тебя что, у всех селектов один name? о_О. Я бы дал всем select-ам ID-шники и сделал бы массив селектов. Потом просто по массиву скрывал бы в цикле все селекты после следующего и открывал. Так лучше, ИМХО.

--------------------

comcon1 on twitter

EmilRegis

Дата 11.1.2010, 15:47 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 306
Регистрация: 21.9.2007

Репутация: 3
Всего: 4

нет ничего другого скрипт не делает)) и name у селектов разные...
var seltd = document.getElementsByName("seltd"); - это name для td-шек, содержащих селекты

Amphiluke

Дата 11.1.2010, 15:51 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112

Я бы запрограммировал так, но это всё, видимо, на любителя — кому как нравится…

Код


    function addEventHandler(obj, evnt, handler) {
        if (obj.addEventListener) {
            obj.addEventListener(evnt, handler, false);
        } else {
            obj.attachEvent("on" + evnt, handler);
        }
    }
    function showHideSubjacent(evnt) {
        var ev = (evnt) ? evnt : event;
        var sender = (ev.target) ? ev.target : ev.srcElement;
        var sels = sender.form.getElementsByTagName("select");
        for (var i = sels.length - 1; i > -1; i--) {
            if ((sels[i - 1] == sender) || (sels[i] == sender)) {
                sels[i].style.visibility = "visible";
                break;
            }
            sels[i].style.visibility = "hidden";
        }
    }
    function addSelectHandlers() {
        var sels = document.getElementById("id_формы").getElementsByTagName("select");
        addEventHandler(sels[0], "focus", showHideSubjacent);
        for (var i = 1; i < sels.length; i++) {
            sels[i].style.visibility = "hidden";
            addEventHandler(sels[i], "focus", showHideSubjacent);
        }
    }
    addEventHandler(window, "load", addSelectHandlers);

12345c

Дата 11.1.2010, 19:29 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 6
Всего: 101

Если name одинаковый, то как раз проще - можно в цикле без лишних имён назначить классы невидимости.

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

Ещё проще - присвоить селектам классы, а паре классов - проверку на onchange.
В терминах JQuery:

Код


$('select .show, select .hidden').change(function(){if(this.selectedIndex!=0){
  var i0=null,i1=null;
  var t=this;
  $('select').each(function(i){if(this.attr('name')=="seltd"{
    if(this==t) i1=i; //сменившийся селект с ненулевым опшн
    if(i1 && i >= i1+2) $(this).addClass('hidden').removeClass('show');
    else $(this).addClass('show').removeClass('hidden');
  }
}

(Вроде как (this==t) должно работать, выявлять номер изменённого в списке селектов.)

Это сообщение отредактировал(а) 12345c - 11.1.2010, 20:07

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

EmilRegis

Дата 12.1.2010, 07:22 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 306
Регистрация: 21.9.2007

Репутация: 3
Всего: 4

спасибо за подсказу, решение Amphiluke и правда куда элегантней)))
правда немножко его переделал

Код


var a = [1,22,3,4,5,6,7,87];
function addEventHandler(obj, evnt, handler) {
    if (obj.addEventListener) obj.addEventListener(evnt, handler, false);
    else obj.attachEvent("on" + evnt, handler);
}
function showHideSubjacent(evnt) {
    var ev = (evnt) ? evnt : event;
    var sender = (ev.target) ? ev.target : ev.srcElement;
    var sels = sender.form.getElementsByTagName("select");
    for (var i = sels.length - 1; i > -1; i--) {
         if ((sels[i - 1] == sender) || (sels[i] == sender)) {
        sels[i].innerHTML = '';
        for(var j=0;j<a.length;j++){
            var option = document.createElement('option');
            option.innerHTML = a[j];
            sels[i].appendChild(option);
        }
                sels[i].parentNode.parentNode.style.visibility = "visible";
                break;
         }
         sels[i].parentNode.parentNode.style.visibility = "hidden";
     }
}
function addSelectHandlers() {
   var sels = document.getElementById("formid").getElementsByTagName("select");
   addEventHandler(sels[0], "change", showHideSubjacent);
   for (var i = 1; i < sels.length; i++) {
       sels[i].parentNode.parentNode.style.visibility = "hidden";
       addEventHandler(sels[i], "change", showHideSubjacent);
   }
}
addEventHandler(window, "load", addSelectHandlers);

потом вместо массива добавлю подгрузку ajax'ом

EmilRegis

Дата 12.1.2010, 07:49 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 306
Регистрация: 21.9.2007

Репутация: 3
Всего: 4

хотя просто вот так будет ещё короче

Код


function selchange(sel_id){
        var form = document.getElementById('formid');
        var sels = form.getElementsByTagName('select');
        for (var i = sels.length-1; i>-1;i--){
            if ((sels[i].id==sel_id) || (sels[i-1].id==sel_id)){
                sels[i].parentNode.parentNode.style.visibility = 'visible';
                break;
            }
            sels[i].parentNode.parentNode.style.visibility = 'hidden';
        }
    }

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »