Mysql PHP связанные выпадающие списки марка-модель

Question

Нужно связать 2 таблицы в 2-х выпадающих списках <option value>

Таблицы:

mark содержит поле id (цифра) и поле title (марки наподобие Porsche)
model cодержит id (цифра), title (модели наподобие Cayenne), mark_id (цифра сопоставляется с id из таблицы mark)

Нужно чтобы при выбора марки из таблицы mark автоматически подгружались модели из таблицы model при этом таблицы все начинаются с id 1.

То есть совпадения должны быть между таблицей mark(id) и таблицей model (mark_id) и если они есть, показываются все модели из title.

Список должен автоматически меняться если выбирается другое значение.

Использую также Redbean PHP.

Ниже привожу код, в котором должны появляться значения.

Марки

<select class="select2" name="mark" id="mark" required>
    <option value="" disabled selected>Выберите марку</option>
    <option value="0">Все марки</option>'
    <?php if (isset($marks)): ?>
        <?php foreach ($marks as $mark): ?>
             <option value="<?=$mark['id']; ?>"><?=$mark['title']; ?></option>
        <?php endforeach; ?>
     <?php endif; ?>
</select>

Модели

<select class="select2" name="model" id="model" required>
   <option value="0" disabled selected>Модель</option>
</select>

Answer 1

В начало страницы:

if ($_GET['mark']) {
    $model = R::findAll('model', 'ORDER BY title ASC WHERE `mark_id` = ' . $_GET['mark']);
    print json_encode($model);
}

HTML, JS

<select class="select2" name="mark" id="mark" required>
    <option value="" disabled selected>Выберите марку</option>
    <?php if (isset($marks)): ?>
        <?php foreach ($marks as $mark): ?>
             <option value="<?=$mark['id']; ?>"><?=$mark['title']; ?></option>
        <?php endforeach; ?>
     <?php endif; ?>
</select>
</select>

<select class="select2" name="model" id="model" required disabled>
   <option value="0" disabled selected>Модель</option>
</select>

<script>
    const mark = document.getElementById("mark"),
          models = document.getElementById("model");
          
    mark.addEventListener("change", () => {
      fetch("http://myweb-stie.com/?mark=" + mark.value)
      .then(response => response.json())
      .then(data => {
        let children;
        while(children = models.children[0].nextElementSibling) {
          models.removeChild(children)
        }
        models.value = 0;
        models.disabled = false;
        data.map(model => {
          const option = document.createElement("option");
          option.value = model.mark_id;
          option.innerText = model.title;
          models.appendChild(option);
        })
      })
    })
</script>

БЛОГ НА HUSL

Mysql PHP связанные выпадающие списки марка-модель

Ответы (1 шт):