0

В базе данных есть таблица cat состоит из 530 строк:

id name        parent
1  Телефоны    0
2  Ноутбуки    0
3  Iphone      1
4  Samsung     1
5  Macbook     2
6  HP          2
7  Macbook PRO 5
8  Macbook AIR 5

Искал в интернете, в основном решения все для БД которая состоит из нескольких взаимосвязанных таблиц (region, city и тд) как пример клик

Весь список достаю вот так:

  <?
 // Делаем выборку из таблицы.
  $sql_cat = "SELECT * FROM `cat`";
  $on_link = mysqli_connect($db_host, $db_user, $db_pass);

  $result_select = mysqli_query($on_link, $sql_cat);

    echo "<select class='row-item-2' name = 'cat'>";

    echo "<option value='0'>Категория</option>";

        while($object = mysqli_fetch_object($result_select)){

            echo "<option value = '$object->id' > $object->name </option>";
        }
    echo "</select>";

?>

Знаю что эта проблема решается с помощью ajax (в js я полный ноль), буду очень признателен если кто-нибудь поделиться кодом и подправит мой код (php) ну или поделиться ссылкой на конкретное решение. Второй день не могу найти материал, который мне поможет. Буду признателен за любую помощь. Спасибо.

Как пример того как должно выглядеть: введите сюда описание изображения

2 ответа 2

1

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

var data = [
      { id: 1, title: "Телефоны", parent: 0 },
      { id: 2, title: "Ноутбуки", parent: 0 },
      { id: 3, title: "Iphone", parent: 1 },
      { id: 4, title: "Samsung", parent: 1 },
      { id: 5, title: "Macbook", parent: 2 },
      { id: 6, title: "HP", parent: 2 },
      { id: 7, title: "Macbook PRO", parent: 5 },
      { id: 8, title: "Macbook AIR", parent: 5 },
      { id: 100, title: 'Недвижимость', parent: 0},
      { id: 101, title: "Команта", parent: 100},
      { id: 102, title: "Квартира", parent: 100},
      { id: 103, title: "Блок-секция", parent: 100},
      { id: 104, title: "Куплю", parent: 102},
      { id: 105, title: "Продам", parent: 102},
      { id: 106, title: "Куплю", parent: 101},
      { id: 107, title: "Продам", parent: 101},      
    ];
    
   
$(function(){
    createSelect(0);
});

$("#filter").on('change', 'select', function(){
   var id =  $(this).val();
   
   $(this).nextAll().remove();
   if(id>0){
      createSelect(id);   
   }
});


function createSelect(pId){
    var $s = $("<select>").data('parent', pId)
                 .append('<option value="">Не выбрано</option>');
    var f = data.filter(v => v.parent == pId);
    
    console.log(pId);
    if(f.length){
        f.forEach(function(v){
              $("<option>").val(v.id)
                       .text(v.title)
                       .appendTo($s);
         });
         $s.appendTo("#filter");
    }
    else{
        console.log('ajax/ id: ' + pId);       
    }
    $("#done").toggle(f.length == 0);
    $("#sel").toggle(f.length > 0);
}
#sel { color: red; display: none;}
#done { color: green; display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="filter">  
</div>

<span id="sel">Продоожайте</span>
<span id="done">Выбрано</span>

9
  • Доброго времени суток. Таблица состоит из 530 строк. Commented 13 мар. 2018 в 13:19
  • вариаций того как получить данные можно придумать множество. следует рассмотреть стратегию работы пользователя с данными элементами. Можно сразу выводить этот массив на странице, или брать подключаемом js файле (динамическом). Можно выводить сразу верхний уровень, а поддеревья загружать при смене значений. и т.п.Если есть вариант, когда пользователь просто не будет пользоваться на странице этим функционалом, то смысла вытаскивать всю таблицу фильтров сразу нет. Если с огромной вероятностью, пользователь выберет только один пункт из верхнего уровня то имеет смысл подгружать поддерево по запросу
    – teran
    Commented 13 мар. 2018 в 13:28
  • Реализую проект исключительно для себя. Цель этой задачи выбрать конкретную категорию и отправить ее id в БД. 3й уровень категорий будет крайним, (к примеру Недвижимость - Квартиры - Продам) где "Недвижимость" и "Квартиры" нельзя использовать, передавать можно только конечный результат - "Продам". Commented 13 мар. 2018 в 13:40
  • "Куплю/Продам/Обменяю" по сути это не категория, а тип объявления должны быть
    – teran
    Commented 13 мар. 2018 в 14:01
  • у "Куплю/Продам/Обменяю" есть уникальные ID, это можно считать категорией. Commented 13 мар. 2018 в 14:06
0
<?
require_once 'config.php';

// Подключение к базе данных MySQL.
$on_link = mysqli_connect($db_host, $db_user, $db_pass) or die('Ошибка соединения с сервером MySQL!');

// изменение набора символов на utf8
mysqli_set_charset($on_link, "utf8");

// Выбираем БД для работы в MySQL.
$db_select = mysqli_select_db($on_link, $db_base_ref) or die('Не удалось выбрать БД MySQL.');

function is_ajax() {
    return (isset($_SERVER['HTTP_X_REQUESTED_WITH'])
        && strtolower(getenv('HTTP_X_REQUESTED_WITH')) === 'xmlhttprequest')
        || !empty($_REQUEST['ajax']);
}
// Получение Категорий из БД
function get_cat_options($parent, $db) {
    $sql_cat = 'SELECT * FROM `cat` WHERE `parent` = '. intval($parent) .';';
    $result_select_cat = mysqli_query($db, $sql_cat);
    ob_start();
    while ($row = mysqli_fetch_object($result_select_cat)) {?>
        <option value="<?=$row->id?>"><?=$row->name?></option>
    <?}
    return ob_get_clean();
}
if (!empty($_REQUEST['cat'])) {
    $subcat1 = get_cat_options($_REQUEST['cat'], $on_link);
    if (is_ajax()) {
        echo $subcat1;
        exit;
    }
}
if (!empty($_REQUEST['subcat1'])) {
    $subcat2 = get_cat_options($_REQUEST['subcat1'], $on_link);
    if (is_ajax()) {
      echo $subcat2;
      exit;
    }
}?>



<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<?// Получение Категорий из БД?>
<select class="row-item-2" name="cat">
    <option value="0">Категория</option>
    <?=get_cat_options(0, $on_link)?>
</select>
<select class="row-item-2 _hide" name="subcat1" style="display:none">
    <option value="0">Подкатегория</option>
    <?!empty($subcat1) ? $subcat1 : ''?>
</select>
<select class="row-item-2 _hide" name="subcat2" style="display:none">
    <option value="0">Подкатегория</option>
    <?!empty($subcat2) ? $subcat2 : ''?>
</select>

<script>
  function get_cat(from, to) {
    let $t = $('[name="'+ from +'"]'), data = { ajax: 1 };
    data[from] = $t.val();
    $t.siblings('._hide').hide().find('option:not(:first-child)').remove();
    $.get(location.href, data, res => $('[name="'+ to +'"]').append(res).show());
  }
  $(document).ready(function() {
    $('[name="cat"]').on('change', () => get_cat('cat', 'subcat1'));
    $('[name="subcat1"]').on('change', () => get_cat('subcat1', 'subcat2'));
  });
</script>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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