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

are you looking to have something like : <select> <optgroup label="fruit"> <optgroup label="yellow"> <option value="volvo">one</option> </optgroup> <optgroup label="red"> <option value="volvo">three</option> <option value="saab">four</option> </optgroup> </optgroup> <optgroup label="legumes"> <optgroup label="yellow"> <option value="volvo">seven</option> <option value="saab">eight</option> </optgroup> </optgroup> </select> — Yassine CHABLI
– Yassine CHABLI, Commented Feb 15, 2019 at 12:07
@MohammedYassineCHABLI i have add image that explain more, a drop down select with options <select><option></option></select> once i choose any of main categories it will show another select option to choose sub-categoroy and once i choose sub category it show another select option for the sub sub category https://i.sstatic.net/LL9gL.png — Isabelle Jacob
– Isabelle Jacob, Commented Feb 15, 2019 at 12:29

DEarTh · Accepted Answer · 2019-02-15 12:44:15Z

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>

This is absolutely amazing, the function is very helpful ... thanks a lot

Collectives™ on Stack Overflow

drop-down select from nested array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related