获取数组的值并将其显示为父级和子级 - Get value of array and display it into dropdown as parent and child

我在代码点火器工作。我想将类别下拉列表a显示为父类别及其子类别。这里我有一个这样的数组：

Array
(
[category] => Array
    (
        [0] => Array
            (
                [id] => 1
                [Name] => web
            )
        [1] => Array
            (
                [id] => 2
                [Name] => Travels
                [child_cat] => Array
                    (
                        [0] => Array
                            (
                                [id] => 3
                                [Name] => Food
                            )
                    )
            )
     )
)

在这里，我想在下拉框中将"旅行"显示为父类别，并在"旅行"类别下显示"食物"。

我创建了这样的选择框：

<select class="form-control" id="sel1">
    <option value="0">Select</option>
        <?php
            foreach($category as $cat)
            {
                 if($cat['child_cat'] == "")
                 {  
        ?>
    <option value="<?php echo $cat['id']; ?>"><?php echo $cat['Name']; ?></option>
        <?php
            }
                 else
                 {
                    foreach($cat['child_cat'] as $ch)
                    {
        ?>
                        <option value="<?php echo $ch['id']; ?>">&nbsp;&nbsp;&nbsp;<?php echo $ch['Name']; ?></option>
        <?php
                    }
                }
           }
        ?>
</select>

在这里，它不能将旅行显示为父类别。食物显示在网络下而不是旅行。那么我应该写什么代码呢？

尝试下面这样的东西

<select id="test">
    <?php foreach($category as $category):?>
        <?php if($category['child_cat']){?>
            <optgroup label="<?php echo $category['name'];?>">
            <?php foreach($category['child_cat'] as $child):?>
                <option value="<?php echo $child['id'];?>"><?php echo $child['name'];?></option>
            <?php endforeach;?>
            </optgroup>
        <?php }else{ ?>
            <option value="<?php echo $category['id'];?>"><?php echo $category['name'];?></option>
        <?php } ?>
    <?php endforeach;?>
</select>

您可以在代码中使用嵌套的 optgroup。

<select>
    <optgroup label="Level One">
        <option> A.1 </option>
        <optgroup label="&nbsp;&nbsp;&nbsp;&nbsp;Level Two">
           <option>&nbsp;&nbsp;&nbsp;&nbsp; A.B.1 </option>
        </optgroup>
        <option> A.2 </option>
    </optgroup>

View

<select id="main_cat" name="main_cat">
    <option value="">Select Category</option>
    <?php foreach($categories as $cat) {
        $selected = ($cat_id == $cat['cat_id'] ? 'selected="selected"' : '');
        echo '<option value="' . $cat['cat_id'] . '" ' . $selected . '>' . $cat['cat_name'] . '</option>';
   } ?>
</select>
<select id="subcategory" name="subcategory">
       <option value="<?=@$childcat_id;?>">
           <?=(!empty($childcat_id) ? $childcat_name : 'Select Category First');?>
      </option>
</select>
<select id="childcategory" name="childcategory">
       <option value="<?=@$subcat_id;?>">
           <?=(!empty($subcat_id) ? $subcat_name : 'Select Category First');?>
      </option>
</select>

脚本

//For Main Categories.
$('#main_cat').on('change',function(event,params){
        $cat_id = params.selected;
        $.ajax({
            url: '<?=site_url("era/subcategory/retrive");?>',
            type: 'GET',
            data: {'catid': $cat_id},
            dataType: 'json',
            success: function(data, textStatus, jqXHR)
            {
                var newSubcats = $.map(data, function(subcat){
                    return '<option value="' + subcat.subcat_id + '">' + subcat.subcat_name + '</option>';
                })
                $('#subcategory').html(newSubcats);
                $("#subcategory").trigger("chosen:updated");
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
            }
        });
    });
//For Sub Categories.
$('#subcategory').on('change',function(event,params){
        $subcat_id = params.selected;
        $.ajax({
            url: '<?=site_url("era/child_cat/retrive");?>',
            type: 'GET',
            data: {'subcat_id': $subcat_id},
            dataType: 'json',
            success: function(data, textStatus, jqXHR)
            {
                var newSubcats = $.map(data, function(subcat){
                    return '<option value="' + subcat.subcat_id + '">' + subcat.subcat_name + '</option>';
                })
                $('#childcategory').html(newSubcats);
                $("#childcategory").trigger("chosen:updated");
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
            }
        });
    });