Javascript 基于Laravel中选定选项的表单操作中的动态路由路径

我在laravel 5.4视图中有这样一个表单：

<form action="#" method="POST" class="form-inline" role="form">
        {{ csrf_field() }}
            <div class="form-group">
                <select id="tdcategory" class="selectpicker show-tick show-menu-arrow" onchange="this.form.submit()">
                  @foreach($categories as $category)
                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                  @endforeach
                </select>
            </div>
            <div class="form-group">
            <select id="tdlocation" class="selectpicker show-tick show-menu-arrow" onchange="this.form.submit()">
                @foreach($locations as $location)
                    <option value="{{ $location->id }}">{{ $location->name }}</option>
                @endforeach
            </select>
            </div>
</form>

{{csrf_field（）}}
@foreach（$categories作为$category）
{{$category->name}
@endforeach
@foreach（$locations作为$location）
{{$location->name}
@endforeach

我有两个问题：

1） 如何动态地将表单操作设置为

类别/{category->id}/locations/{location->id}

其中，类别->标识和位置->标识将基于用户当前选择的选项值

2） 由于表单是在用户更改选项时提交的，因此页面将重新加载并重置

标记。如何跟踪以前选择的选项，并在页面加载时，向用户显示提交表单之前他/她选择了哪个选项？

1）您可以通过JS执行此操作：从selects中删除“onchange”属性，并添加初始代码，类似这样：

$('#tdcategory,#tdlocation').change(function(){
    var category = $('#tdcategory').val();
    var location = $('#tdlocation').val();

    if (category && location) {
        $(this).closest('form')
            .attr('action', '/categories/'+ category +'/locations/' + location)
            .submit();
    }
});

<select id="tdcategory" name="tdcategory" class="selectpicker show-tick show-menu-arrow">
    @foreach($categories as $category)
        <option value="{{ $category->id }}" @if($category->id == request()->get('tdcategory'))selected="selected"@endif>{{ $category->name }}</option>
    @endforeach
</select>

<select id="tdlocation" name="tdlocation" class="selectpicker show-tick show-menu-arrow">
    @foreach($locations as $location)
        <option value="{{ $location->id }}" @if($location->id == request()->get('tdlocation'))selected="selected"@endif>{{ $location->name }}</option>
    @endforeach
</select>

2） 您可以从请求中获取提交的值，并在每个select中添加插入selected=“selected”属性的条件，如下所示：

$('#tdcategory,#tdlocation').change(function(){
    var category = $('#tdcategory').val();
    var location = $('#tdlocation').val();

    if (category && location) {
        $(this).closest('form')
            .attr('action', '/categories/'+ category +'/locations/' + location)
            .submit();
    }
});

<select id="tdcategory" name="tdcategory" class="selectpicker show-tick show-menu-arrow">
    @foreach($categories as $category)
        <option value="{{ $category->id }}" @if($category->id == request()->get('tdcategory'))selected="selected"@endif>{{ $category->name }}</option>
    @endforeach
</select>

<select id="tdlocation" name="tdlocation" class="selectpicker show-tick show-menu-arrow">
    @foreach($locations as $location)
        <option value="{{ $location->id }}" @if($location->id == request()->get('tdlocation'))selected="selected"@endif>{{ $location->name }}</option>
    @endforeach
</select>

@foreach（$categories作为$category）
id==request（）->get（'tdcategory'）selected=“selected”@endif>{{{{$category->name}
@endforeach
@foreach（$locations作为$location）
id==request（）->get（'tdlocation'）selected=“selected”@endif>{{{{$location->name}
@endforeach