简体   繁体   English

从嵌套数组中选择下拉菜单

[英]drop-down select from nested array

I have nested array (3d) and would like to put its values in drop down select menu using PHP and jQuery 我有嵌套数组(3d),并想使用PHPjQuery将其值放在下拉选择菜单中

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) 我想做的是显示主要类别(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 在选择(change)任何将显示我选择的类别子类别的选择选项

and then on select any of the subcategories, it will show its sub sub categories. 然后选择任何子类别,它将显示其子子类别。

Image explain more 图片说明更多

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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM