按确定按钮后如何停止刷新 select 框选项

Question

我在 Service 中创建了一个 UI 页面现在下面是我的简单 HTML 片段，它创建了一个 Select 框和一个确定按钮

现在我 select 将 select 框编辑为 Mango 并输入 ok .如何保持用户 select 的相同选项直到用户更改它

function validation(){
 var value=document.getElementById("selectedValue").value;
 
 if(value=='disabled selected')
  {
   alert("Please select any value before submitting");
  }
 else if(value=="1"){
    alert("hello this is mango");
 }
 
}

<div class="container">
   <div class="row">
    
    <div class="form-group" style="margin-top:12px;">
     
     <select class="form-control" name="selectedValue" id="selectedValue" style="width:150px;">
      <option value="disabled selected">Choose your option</option>
      <option value="1" >Mango</option>
      <option value="2">Orange</option> 
      <option value="3">Grapes</option> 
      
     </select>
    <!--<h4 id="number_of_updates" style="display:none"><span class="label label-danger"></span></h4> -->

    </div>
     <button type="button" class="btn btn-primary" onclick="validation()"  style="padding: 0px 8px;">Ok</button>
    
   </div>
  </div>

它按要求工作，当我刷新浏览器时，它将设置为选择您的选项。任何人都可以帮助我如何保存 selected 值直到它被改变

Answer 1

有多种方法可以在刷新时保持状态。 localStorage 是显而易见的选择，但对于您的情况来说，一个更简单的解决方案可能是像这样在 URL 中编码状态（基本上与网络应用程序保持某些状态的方式相同）。

在 validation() 函数的末尾插入此代码：

 history.pushState(null, '', '?val=' + value);

在该函数之后插入此代码：

window.onload = function() {
    var params = new URLSearchParams(location.search);
    var value = params.get('val') || 'disabled selected';
    var select = document.getElementById('selectedValue');
    if (select) select.value = value;
}

就是这样。 注意：URLSearchParams 不适用于 IE，相反，手动解析查询并不难。

Answer 2

为了达到预期的效果，我会使用 localStorage。我会在你的 validation() 函数中设置 localStorage 项目：

function validation(){
    var value=document.getElementById("selectedValue").value;
    localStorage.setItem('MyValue', value);
    if(value=='disabled selected')
        {
            alert("Please select any value before submitting");
        }
    else if(value=="1"){
                alert("hello this is mango");
    }

}

请注意，我将其设置为从 selectList 中选择的值。然后我们需要在页面加载时检索这个保存的值（以防有人刷新页面）：

window.onload = function (){ //function that is called when your page 
var selectList = document.getElementById('selectedValue');
  var stored = localStorage.getItem('MyValue');
  console.log(stored);
  if(stored && selectList){
    selectList.value = stored //setting saved value to as selected in selectList
  }
}

编辑：尽管大多数浏览器都支持 localStorage，但建议检查其是否可访问。喜欢if (typeof localStorage !== 'undefined') ...

按确定按钮后如何停止刷新 select 框选项

How to stop refreshing the select box option after pressing OK button

html

servicenow