Question

我一直在寻找一种自动显示子类别选择下拉列表的方法，仅当用户选择一个类别时。如果用户未选择类别，则子类别下拉列表将保持隐藏状态。

我一直在寻找通过参考在线教程和视频来实现这一目标的方法，但到目前为止我尝试过的所有内容并没有真正起作用。

所以，我想帮助我解决这个问题。我创建了一个包含2个表的数据库：类别：catId，catName和子类别：subcatId，catId，subcatName

这是我的HTML代码

<div class="row required">
    <label for="category_level_1">Category</label>                        
    <div class="column">
        <select id="Category" name="category" required="required" data-parsley-required-message="Please select a Category." data-level="0">
            <option value="">Select Category</option>
            <?php
                $getCategory = $category->getAllCat();
                if($getCategory){
                    while($result = $getCategory->fetch_assoc()){
                    ?>
                        <option value="<?php echo $result['catId']; ?>"><?php echo $result['catName']; ?></option>
                    <?php
                    }
                }
            ?>
        </select>                          
    </div>
</div>

<div id="Subcategory" class="row hidden" >
    <label for="subcategory">Subcategory</label>                           
    <div class="column">
        <select id="Subcategory" name="subcategory" required="required" data-parsley-required-message="Please select a subcategory." data-level="1">
            <option value="">Select sub-category</option>
        </select>                            
    </div>
</div>

Category Table

Subcategory Table

所以关于如何使用php和javascript编写代码的任何建议？我是php和javascript的新手。

Answer 1

尝试使用此代码，我需要实现可靠的下拉列表时找到它。(fiddle demo)

您可以根据需要更改设计和逻辑。

提示：以此格式获取类别和子类别：

$cat = array(['t'] => array('t1', 't2', 't3'), ['x'] => array('x1', 'x2', 'x3'));

控制器：

$cat = $this->model_name->getCat();
 $final = [];
        foreach ($cat as $value) {
            $final[$value['catName']][] = array('name' => $value['subcatName'], 'key' => $value['subcatId']);
        }

型号：我假设类别表名称为cat，子类别为sub_cat，您可以将其替换为表名。

function getCat() {
        $this->db->select('*');
        $this->db->from('cat a');
        $this->db->join('sub_cat b', 'a.catId = b.catId');
        $result = $this->db->get();
        $cat = $result->result_array();
        $final = [];
        foreach ($cat as $value) {
            $final[$value['catName']][] = array('name' => $value['subcatName'], 'key' => $value['subcatId']);
        }
}

查看：

echo "<select class="dependent" name="products" multiple>";
foreach ($final as $catName => $sub) {
            echo  '<optgroup label="'.$catName.'">'.'<bR>';
            foreach ($sub as $value) {
                echo  '<option value="'. $value['key'] .'">'. $value['name'] .'</option>';
            }

        }
echo "</select>";

您可以循环浏览此动态下拉列表。

jQuery代码：

$(function () {
    $("select.dependent").each(function (i, sel) {
        var original = $(this).clone(),
            dependent = $("<select></select>").attr({
                name: this.name
            }).insertAfter(this)
            this.name = "categories_" + this.name

            $("optgroup", this).replaceWith(function () {
                return "<option>" + this.label + "</option>"
            })
            $("option:first",this).prop("selected",true)
            $(this).removeAttr("multiple").on("change", function () {
                var cat = $(this).val()
                dependent.html(original.children("[label='" + cat + "']").html())
            }).change()
            console.log(this)
    })
})

HTML代码：

  <select class="dependent" name="products" multiple>
        <optgroup label="C1">
            <option>P1A</option>
            <option>P1B</option>
            <option>P1C</option>
        </optgroup>
        <optgroup label="C2">
            <option>P2A</option>
            <option>P2B</option>
            <option>P2C</option>
        </optgroup>
        <optgroup label="C3">
            <option>P3A</option>
            <option>P3B</option>
            <option>P3C</option>
        </optgroup>
    </select>

显示任何所选类别的子类别

1 个答案: