跨页面保留 select 个值

Question

我有几条路线

Route::get('/route_one', 'IndexController@index');
Route::get('/route_two', 'IndexController@index');

它们调用相同的控制器函数，因为这些页面需要相同的数据数组。这个函数如下

public function index()
{
    $user = Auth::user();
    if( $user ) {
        $fileData = $this->fillArrayWithFileNodes(new DirectoryIterator( public_path(). '/images'));
        $currentPath= Route::getFacadeRoot()->current()->uri();

        if(!empty($fileData)) {
            return view('index', compact('fileData', 'currentPath'));
        }
    } else {
        return view('auth.login');
    }
}

现在索引视图非常简单，但确实有这一部分

@if($currentPath == 'route_one')
    @include('layouts.searchbarRouteOne')
@endif
@if($currentPath == 'route_two')
    @include('layouts.searchbarRouteTwo')
@endif

因此，根据调用的路线，会显示不同的侧边栏。现在侧边栏基本上包含大量 select 输入，如下所示

<div class="col-lg-3">
    <div class="form-group">
        <label>Year</label>
        <select id="year" class="form-control">
            <option value=""></option>
            @foreach($fileData["route_one"] as $year => $products)
                <option value="{{ $year }}">{{ $year }}</option>
            @endforeach
        </select>
    </div>
</div>

两个边栏有不同的 select。当 select 选项被 selected 时，会进行 ajax 调用以显示图像。这一切都很好。

这是我的问题。我有一个 link 去 route_one 或 route_two。当单击 link 时页面刷新，select 处于默认状态。我想以某种方式做的是保持 select 输入的最后状态。我没有将此数据存储在数据库中，这可能是个问题？

此外，route_two 依赖于 route_one 中的 select 选项。因此，当 route_two 被 select 编辑时，我需要将其传递给 route_ones 选项。

实现我所追求的目标的最佳方式是什么？

谢谢

Answer 1

想一想您要在这里完成什么：记住旧的输入值。

您可以在单击 link 时发送表单并在您的控制器中刷新数据或使用 JavaScript 将输入值保存到浏览器的存储空间。

使用简单的简单示例 JavaScript

// Get all select-elements
var inputs = document.querySelectorAll('select');

// Loop through them
for (var i = 0; i < inputs.length; i++) {
    // Set the old input value
    inputs[i].value = localStorage.getItem(inputs[i].name);

    // Start listening changes
    inputs[i].addEventListener('change', store);
}

// The function to call when the value has changed
function store(event) {
    // Set the new value to the browser's storage
    localStorage.setItem(event.target.name, event.target.value);
}

在该示例中，您的表单元素需要具有唯一的 name 属性。当然可以使用例如将其关闭id 属性。

跨页面保留 select 个值

Keeping select values across pages

ajax

laravel

laravel-5

laravel-5.1