javascript - PHP获取选择表单的选定值

Question

我正在使用 Laravel，目前正在创建一个表单，用户可以先在其中选择一个类别，然后再选择一个相关的子类别。

一个类别有一个 id 和一个名称，一个子类别有一个 id 和一个名称，还有一个 parent_id(所以这是父类别的 id)。

现在我尝试以下操作: 用户可以选择一个类别，在他这样做之后，第二个 select 出现，用户可以从属于父类别的子类别中选择子类别(而且只有那些!)。

因此， View 从 Controller 获取所有类别和所有子类别。

然后，对于我这样做的类别:

<div class="form-group{{ $errors->has('category') ? ' has-error' : '' }}">
                                <label for="category" class="col-md-4 control-label">Kategorie</label>

                                <div class="col-md-6">
                                    <select>
                                        @foreach($categories as $category)
                                            <option value="<?php echo $category['id'];?>">{{$category->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

对于子类别我有相同的，只是子类别:

<div class="form-group{{ $errors->has('subCategory') ? ' has-error' : '' }}">
                                <label for="subCategory" class="col-md-4 control-label">Unterkategorie</label>

                                <div class="col-md-6">
                                    <select>
                                        @foreach($subCategories as $subCategory)
                                            <option value="<?php echo $subCategory['id'];?>">{{$subCategory->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

现在的问题是:我需要做的是(在 foreach 的子类别中)一个 @if 并检查 的所选 option 的值>category select 然后检查if($subcategory->parent_id == $chosenOptionID)，用伪代码来说。我怎样才能做到这一点？我不想在有人也没有选择子类别之前发送表单或其他东西......当然，我可能会在选择类别时向 Controller 发送 ajax 请求，然后检查的值 Controller 中的选项并发回 id。但这会导致非常大的流量，并且可能不是最好的解决方案，所以我只想这样做，如果我没有更好的方法......

PS:问题不是在没有选择类别时隐藏子类别，这是基本的 js，我知道该怎么做。我只想知道，是否可以在表单尚未发送时读取 category select 的值。

编辑:我现在尝试了 AJAX，但似乎有点错误...... 我改变了什么:

<div class="form-group{{ $errors->has('subCategory') ? ' has-error' : '' }}">
                                <label for="subCategory" class="col-md-4 control-label">Unterkategorie</label>

                                <div class="col-md-6">
                                    <select class="form-control" id="subCategorySelect">

                                    </select>
                                </div>
                            </div>

选择现在是空的并且有一个 ID。然后在同一个文件中我有以下 JS:

<script>
    $().ready(function(){
        $('#categorySelect').change(function(){
            var selectedOption = $('#categorySelect').find(":selected").val();
            $.ajax({
                url: '/getSubCategories',
                data: {'id': selectedOption},
                type: 'GET',
                success: function (data) {
                    $('#subCategorySelect').html(data);
                }
            });
        });
    });
</script>

/getSubcategories路由指向我的 Controller 中的以下函数:

public function returnSubCategories(Request $request){
        $subCategories = Subcategory::where('parent_id', '=', $request->id);
        foreach($subCategories as $subCategory){
            echo "<option value='$subCategory->id'>$subCategory->name</option>";
        }
    }

但它不起作用.. ajax 请求肯定会在选择一个选项时发送，并且会发送正确的 ID。但不知何故没有任何输出......任何想法为什么？

Answer 1

我终于可以使用 AJAX 了。这是我的初始 subCategorySelect。

<div class="form-group{{ $errors->has('subCategory') ? ' has-error' : '' }}">
                                <label for="subCategory" class="col-md-4 control-label">Unterkategorie</label>

                                <div class="col-md-6">
                                    <select class="form-control" id="subCategorySelect">

                                    </select>
                                </div>
                            </div>

选择现在是空的并且有一个 ID。然后在同一个文件中我有以下 JS:

<script>
    $().ready(function(){
        $('#categorySelect').change(function(){
            var selectedOption = $('#categorySelect').find(":selected").val();
            $.ajax({
                url: '/getSubCategories',
                data: {'id': selectedOption},
                type: 'GET',
                success: function (data) {
                    $('#subCategorySelect').html(data);
                }
            });
        });
    });
</script>

/getSubcategories路由指向我的 Controller 中的以下函数:

public function returnSubCategories(Request $request){
        $subCategories = Subcategory::where('parent_id', '=', $request->id)->get();
        foreach($subCategories as $subCategory){
            echo "<option value='$subCategory->id'>$subCategory->name</option>";
        }
    }

而且效果很好。