0

Привет, каким образом можно сделать чтобы, $obj->rid из первого селекта, подставлялся вместо $selects[1] по второй, и так же с третьим. Смысл в том, чтобы сначала набор селектов был как в начальном коде, а при смене пользователем, менялся. Спасибо)

$sql = "select rparent, rid, rname_ru FROM rubrics_new";
$selects = $pdo->query($sql)->fetchAll(PDO::FETCH_GROUP|PDO::FETCH_OBJ);

echo "<select name='first'>";

foreach($selects[0] as $obj ) { 
    echo "<option value='$obj->rid'>$obj->rname_ru</option>";
} 

echo "</select>";

echo "<select name='second'>";

foreach($selects[1] as $obj ) {
    echo "<option value='$obj->rid'>$obj->rname_ru</option>";
} 
echo "</select>";

echo "<select name='third'>"; 

foreach($selects[10] as $obj ) {
    echo "<option value='$obj->rid'>$obj->rname_ru</option>";
}

echo "</select>";

2 ответа 2

1

В общем, смотри, что тебе приблизительно нужно :

Во-первых, тебе надо, чтобы сервер выдавал ява-скрипту данные в json-формате (делается это простыми средстваи php - способы разные есть, в т.ч. встроенная ф-ция, которую я сам почти не проверял, сейчас не помню как она звучит - в общем, найдешь как в корректном формате вывести). На выходе у тебя должен получится json - объект примерно такого вида:

    {
    0 : {
       name : "Select 1", val : {
               0: {
                  name : "Select 1.1", val : {
                       0: { name : "Select 1.1.1", val : ""},
                       1: { name : "Select 1.1.2", val : ""},
                       2: { name : "Select 1.1.3", val : ""},
                       3: { name : "Select 1.1.4", val : ""}
                    }//END Val Select 1.1
                }, 
                1: {
                  name : "Select 1.2", val : {
                       0: { name : "Select 1.2.1", val : ""},
                       1: { name : "Select 1.2.2", val : ""},
                       2: { name : "Select 1.2.3", val : ""},
                       3: { name : "Select 1.2.4", val : ""}
                    }//END Val Select 1.2
                },
                2: {
                  name : "Select 1.3", val : {
                       0: { name : "Select 1.3.1", val : ""},
                       1: { name : "Select 1.3.2", val : ""},
                       2: { name : "Select 1.3.3", val : ""},
                       3: { name : "Select 1.3.4", val : ""}
                    }//END Val Select 1.3
                }
        }//END Val Select 1
    }, 
    1 : {
       name : "Select 2", val : {
               0: {
                  name : "Select 2.1", val : {
                       0: { name : "Select 2.1.1", val : ""},
                       1: { name : "Select 2.1.2", val : ""},
                       2: { name : "Select 2.1.3", val : ""},
                       3: { name : "Select 2.1.4", val : ""}
                    }//END Val Select 2.1
                }, 
                1: {
                  name : "Select 2.2", val : {
                       [...]
                    }//END Val Select 2.2
                },
                2: {
                  name : "Select 1.3", val : {
                       [...]
                    }//END Val Select 1.3
                }
        }//END Val Select 2
    }, 
    2 : {[...]}
}

Корректность потом проверишь через json-валидатор (их полно в интернете)

Эту конструкцию либо (лучший вариант) подгружаешьна отдельной странице (желательно с header('Content-type: text/json'); header('Content-type: application/json');), которую потом грузись с помощью js (желательно, используя jQuery $.getJSON() - чтобы не морочиться), либо (менее желательно), загоняешь все это на ту же страницу в <script>var data = {[...]}</script> - в любом случае, ты получишь объект var data (или называй его как хочешь), в котором ты всегда можешь найти нужную тебе цепочку:

т.е., если у тебя пользователь выбрал на 1м вареанте 2й пункт (index = 1,т.к. отсчет от 0) - список для 2го select будет находиться в data[1].val с заголовками data[1].val[0].name, data[1].val[1].name ..., для 3 го - в data[1].val[0].val (data[1].val[0].val[0].name, data[1].val[0].val[1].name ...)

Т.е. html для select 2го select можно получить таким образом

 var html = ''; 
 for(var i in data[1].val){ html+='<option>' + data[1].val[i].name + '</option>';}

Или с помощью такой функции:

 var getOptions = function(dat){
     var html = ''; 
     for(var i in dat.val){ html+='<option>' + dat.val[i].name + '</option>';}
 }

var options0 = getOptions(data);//Для 1го (хотя его тебе перезаписывать не надо)
var options1 = getOptions(data[0].val);//Для 2го
var options2 = getOptions(data[0].val[1]);//Для 3го

Переписать любой из селектов - не сложно:

//Без jQuery
var select = document.getElementById('selects').getElementsByTagName("select");
select[1].innerHTML = options1;

//C jQuery
var $select = $('#selects select');
$select.eq(1).html(options1);

Осталось отследить событиеизменения и отловить какой из select и на что был изменен

var select_change =  function () {
    var $select = $('#selects select');// Получаем все select
    var index =  $(this).index(); //Понять с которым по счету мы имеем дело  
    var tmp;//сюда будем пихать временные значения из data
    $select.each(function(i,e){//Прогоняем все select
        //Получаем выбранный элемент в каждом <select>
        var opt =(i<=index) ? $(this).fing('option:selected').index() : 0;//Значение "по умолчанию"  для следующих после выбранного пусть будет 0 (1й элемент)
       if(i==0){tmp = data[opt]; //Если это - 1й селект, его не перезаписываем - просто получаем объект  tmp для следующего
       }else{
          if(i > index && typeof tmp!="undefined"){//Если это след. после измененного и удалось получить tmp
             var options  = getOptions(tmp); //Получам html (ф-цию см выше)
             $(this).html(options);//И загоням все это на место того, что есть сейчас
          }
            tmp = tmp.val[opt];//Получаем объект  tmp для следующего
        }
     });  
 }
 $(document).on('change', '#selects select',select_change);

Для js без jQuery - нужно будет видимо прописать onchenge = "select_change(2);" (в скобках - номер селекта (index - чтобы потом не выяснять). Ф-ция select_change тоже будет немного отличаться (for in вместо each и т.д.)

Учти! В написаном мною коде могут быть ошибки: после рабочего дня сидел-писал, голова уже дурная (особенно в select_change). Но общей принцип ты отсюда почерпнуть сможешь и, если что - то разберешься думаю....

3
  • Спасибо, буду заниматься 30 мая 2015 в 14:15
  • Я заполнил массив data.json в том виде в котором у вас в первом окне, и передал его вот так в php: '<?php header('Content-type: text/json'); header('Content-type: application/json'); $data = file_get_contents('data.json'); ?>' Правильно? 2 июн 2015 в 11:47
  • Не совсем понял. Если data.json - это у тебя "физический" файл на сервере (или, по крайней мере, сервер может отдать файл data.json), то этот файл прям можешь из js (jQuery) через $.getJSON() попробовать и грузить: по идеи, он его зачастую и без header ловить нормально может (с header - корректнее, к тому же кроссдоменный с header можно сделать) 2 июн 2015 в 12:24
0

Не уверен, что до конца понял, что ты хочешь, но попробуй все это запихнуть в цикл и динамически подставлять $selects[$i;]

$sel_names = array('first','second','third');
$count= count($selects);
for($i=0; $i<$count; $i++){
     echo "<select name='".$sel_names[$i]."'>"; 
     foreach($selects[$i] as $obj ) {
        echo "<option value='$obj->rid'>$obj->rname_ru</option>";
     }
     echo "</select>";
}

И вот в этом случае ты уже сможешь контроллировать что-куда подставляется. Например, сделав так:

[...]
$k = (($k=$i+1)>=$count) ? $k : 0;
foreach($selects[$k] as $obj ) { [...]
5
  • Попробую подробнее описать, есть таблица, в которой 3 уровня: 1 уровень выводится в первый селект (id 1,2,3,4,5 parentid у них 0), 2 уровень выводится во второй селект(id 10,11,12,..,52), 3 уровень выводится в третий селект(101,..,122) На экран выводится 3 селекта: 1селект(значения с parentid 0) 2 селект(значения с parentid 1) 3 селект(значения с parentid 10). При смене первого селекта(например выбран пункт с id = 2 ) меняется parentid в селект2 на parentid 2. и так же в селект3. Может что-то разъяснил:) 29 мая 2015 в 11:04
  • 1
    Запутал не меньше: т.е. тебе front-end, а не back-end нужен чтоли? Или что? откуда у тебя селект2 parentid 2 будет получать? (если я так понял, у тебя есть селект1 -> parentid 0, селект2 -> parentid 1 и селект3 -> parentid 10 ). Как мне пока что кажется, тебе нужно будет отдавать результаты js-скриптам в json-формате (ввиде вложенных объектов) и потом вешать обработчик onchange на <select> с функцией, получающий выбранные значения, отискивающие нужные значения в полученном json-объекте и генерирующие на их основе новые. <select> за место прежних. 29 мая 2015 в 12:27
  • 1
    Но, т.к. я все еще не уверен, что понял тебя верно расписывать подробнее пока не хочу 29 мая 2015 в 12:29
  • Спасибо за обратную связь, получается что front-end: jsfiddle.net/7d15qaqb/2 тут накидал, может будет понятнее 29 мая 2015 в 14:51
  • Да, так гораздо понятнее. Написал ответ отдельным сообщением 29 мая 2015 в 17:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.