Question

我在codeigniter工作。我想将类别下拉列表显示为父类别，并将其子类别显示为sequance。这里有一个像这样的数组：

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>

此处无法将旅行显示为父类别。食物会显示在网络下而不是游记中。那么我应该编写什么代码？

Answer 1

尝试类似下面的内容

nextToken

Answer 2

您可以在代码中使用嵌套的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>

Answer 3

查看

<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)
            {

            }
        });
    });

获取数组的值并将其显示为父级和子级的下拉列表

3 个答案: