Как ассоциативный массив разбить на зависимые друг от друга select для выбора соответствующих значений?

Question

Есть ассоциативный объект на php значения которого представляют собой массивы

<?php

$colors = {
  "Black":[123],
  "White":[456, 678, 890],
  "Red":[731, 222],
  "Blue":[478, 888]
?>

Мне нужно поместить его значения в цепочку зависимых select, чтобы можно было организовать по ним форму поиска. Т.е. сделать так, чтобы при выборе цвета в первом select подгружались соответствующие этому элементу значения (при выборе Black во втором select были доступны для выбора 123, White - 456, 678, 890 и т.д.).

Застопорился на моменте кодирования и передаче объекта

json_encode($colors);

из php в js, - получаю ошибку Uncaught SyntaxError: "[object Object]" is not valid JSON. Как решить?

Код

$(document).ready(function() {

  var colors = JSON.parse(<?php echo $colors; ?>);

  $('#options').on('change', function() {

    var selectValue = $(this).val();

    $('#choices').empty();

    for (i = 0; i < colors[selectValue].length; i++) {

      $('#choices').append("<option value='" + colors[selectValue][i] + "'>" + colors[selectValue][i] + "</option>");
    }
  });
});

<form action="search.php" method="get">
  <select id="options">
    <option value="" disabled selected>Select an option</option>
    <option value="Black">Black</option>
    <option value="White">White</option>
    <option value="Red">Red</option>
    <option value="Blue">Blue</option>
  </select>
  <select id="choices">
    <option value="" disabled selected>Please select an option</option>
  </select>
  <button type="submit">Search</button>
</form>

Answer 1

Скорее всего, вы передаете в JSON.parse() не кодированную строку, а php массив.
var colors = JSON.parse(<?php echo $colors; ?>);
Вместо этого нужно.
var colors = JSON.parse(<?php echo json_encode($colors);?>);
И проверьте в console.log(), чему равно colors.

БЛОГ НА HUSL

Как ассоциативный массив разбить на зависимые друг от друга select для выбора соответствующих значений?

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