drop-down select from nested array

Question

I have nested array (3d) and would like to put its values in drop down select menu using PHP and jQuery

I have made some try but works only for two level arrays like (categories, sub-categories) but what if each or some of sub-categories also have more sub divisions and here is an example

$categories = array(
    'fruits' => array(
        'red' => array('one', 'two', 'three'),
        'yellow' => array('four', 'five', 'six'),
        'black' => array('seven', 'eight', 'nein'),
    ),
    'vegetables' => array(
        'blue' => array('een', 'twee', 'drie'),
        'white' => array('vier', 'funf', 'zex'),
        'mongo' => array('zibn', 'acht', 'noun'),
    )
);

what i want to do are to show the main categoties (fruits,vegetables)

<select name="food">
    <?php foreach ($categories as $category): ?>
        <option value="<?php echo $category; ?>"><?php echo $category; ?></option>
    <?php endforeach;?>
</select>

and on select (change) any will show select options of the sub-categories of the category i have select

and then on select any of the subcategories, it will show its sub sub categories.

Image explain more

Answer 1

Well this could be done like this,

$categories = array(
    'fruits' => array(
        'red' => array('one', 'two', 'three'),
        'yellow' => array('four', 'five', 'six'),
        'black' => array('seven', 'eight', 'nein'),
    ),
    'vegtiable' => array(
        'blue' => array('een', 'twee', 'drie'),
        'white' => array('vier', 'funf', 'zex'),
        'mongo' => array('zibn', 'acht', 'noun'),
    )
);

// Funtion to generate select box (using single or multi-dimensional array)
function create_select($categories,$level=1,$parrent=''){
    $second_select = '';
    $select = '<select name="category" class="category '.($parrent ? $parrent : '').'" '.($parrent ? 'style="display:none;"' : '').' data-category-level="'.$level.'">';
    // loop through category
    foreach ($categories as $key => $cat) {
        if(is_array($cat)){
            $select .= '<option value="'.$key.'">'.$key.'</option>';
            // if it has sub-category then generate sub-select 
            $second_select .= create_select($cat,$level+1,$key);
        }else{
            $select .= '<option value="'.$cat.'">'.$cat.'</option>';
        }
    }
    // append sub-select to select
    $select .= '</select>'.$second_select;
    return $select;
}

print_r(create_select($categories));
?>

You will need following script to show and hide sub-selects

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
    $('.category').on('change',function(){
        var thisp = $(this);
        $('.category').each(function(){
            // check if it is sub-select of current select (using category-level)
            if($(this).data('category-level') > thisp.data('category-level')){
                if($(this).hasClass(thisp.val())){
                    // show only sub-select that has matching class
                    $(this).css('display','block');
                }else{
                    // hide all other sub-select
                    $(this).css('display','none');
                }
            }
        });
    });

</script>