刷新后如何保持下拉选择

Posted 2023-03-27

【中文标题】刷新后如何保持下拉选择

【英文标题】：how to keep dropdown selected after refresh

【发布时间】：2021-07-16 07:17:07

【问题描述】：

我尝试在重新加载页面后保留所选项目 这是我的下拉列表

刷新后是这样的

我将此代码用于加载下拉列表

<select 
     data-bind="value:SelectedOrganisationData,
                options: GridAllOrganisationDataList,
                event:  change: tanantNameSelect  ,
                optionsText:'TenantName',optionsCaption: 'Choose your organisation ...',
                optionsId:'SelectTenantName'"
                class="dropdown">
</select>

function tanantNameSelect() 
        var data = PayrollIntegrationVM.SelectedOrganisationData().TenantName;

        DisplayMessage(data);
    

使用这个脚本我可以得到选择的值，

【参考方案1】：

如果需要在重新加载页面后保留数据，则必须将选择的值保存到数据库中，并在用户重新加载页面时获取该值。

【讨论】：

我已经将该选定的值添加到数据库中，我想知道如何绑定它

【参考方案2】：

对我来说，你似乎是最重要的。您只需要设置 SelectedOrganisationName。

var data = [
  id: 1, name: 'Test1',
  id: 2, name: 'Test2',
  id: 3, name: 'Test3',
  id: 4, name: 'Test4',
  id: 5, name: 'Test5'
]

function ViewModel()
  var self = this;
  self.selectedOption = ko.observable();
  self.availableOptions = ko.observableArray(data);

  
  self.setSelectedOption = function(item)
    self.selectedOption(item);
  

var viewModel = new ViewModel()
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind="options: availableOptions, optionsText: 'name', optionsId:'id', value: selectedOption"></select>

<br/>
<h3>Press button to set the selection</h3>
<ul data-bind="foreach: availableOptions">
  <li><button data-bind="text: name, click: $parent.setSelectedOption"></button></li>
</ul>

<pre data-bind="text: ko.toJSON($root)"></pre>

【参考方案3】：

即使刷新页面也能保存数据的唯一方法是： 将您想要的数据保存在数据库中。这样，当您刷新页面时，数据仍然存在。 谢谢。希望它有所帮助:)它也帮助了我。

【参考方案4】：

另一个答案是制作一个 ajax 帖子而不是完整帖子。这样，您选择的项目将保持选中状态。 Ajax 不会刷新页面，而只会刷新页面中需要刷新的部分。