即使在使用localStorage刷新页面之后，也可以检索禁用的属性

Retrieve the disabled attributes even after page refresh using localStorage

本文关键字：检索 也可以 属性 localStorage 刷新 之后      更新时间：2023-09-26

我有一个HTML代码，其中有一个select标记，选项是动态填充的。一旦onchange事件发生，所选选项将被禁用。此外，如果发生任何页面导航，则会检索以前填充的选项。

在我的情况下，一旦填充了选项并选择了任何选项，就会被禁用（意图不允许用户再次选择它）。因此，可能会出现这样的情况：在3个选项中，只有两个选项被选中并禁用，因此一旦我刷新，之前未选中的选项就应该被启用。并且之前选择的选项应该被禁用。但我的代码在刷新后启用了所有选项。我该怎么解决这个问题？

html代码

<select id="convoy_list" id="list" onchange="fnSelected(this)">
    <option>Values</option>
    </select>

js代码

//此函数说明选项更改上发生了什么

function fnSelected(selctdOption){
      var vehId=selctdOption.options[selctdOption.selectedIndex].disabled=true;
      localStorage.setItem("vehId",vehId);
      //some code and further process
}

//该函数在下拉列表中显示过程——关于数据如何填充

function test(){
    $.ajax({
    //some requests and data sent
    //get the response back
    success:function(responsedata){
        for(i=0;i<responsedata.data;i++):
        {
            var unitID=//some value from the ajax response
            if(somecondition)
            {
                var select=$(#convoy_list);
                $('<option>').text(unitID).appendTo(select);
                var conArr=[];
                conArr=unitID;
                test=JSON.stringify(conArr);
                localStorage.setItem("test"+i,test);
            }
        }
    }
    });
}

//在显示功能中--刷新时如何检索存储的内容。

function display(){
for(var i=0;i<localStorage.length;i++){
    var listId=$.parseJSON(localStorage.getItem("test"+i)));
    var select=$(#list);
        $('<option>').text(listId).appendTo(select);
}
}

在显示功能中，检索以前为下拉菜单填充的值，但未禁用所选的选项。相反，所有选项都已启用。我在显示功能中尝试了以下操作

if(localStorage.getItem("vehId")==true){
     var select=$(#list);
            $('<option>').text(listId).attr("disabled",true).appendTo(select);
}

但这并不奏效。

页面上的元素不应该具有相同的id

<select id="convoy_list" onchange="fnSelected(this)">
    <option>Values</option>
    </select>

在fnSelected()函数中，无论选择了什么项目，都始终存储项目{"vehId" : true}。相反，您应该首先为每个<option'>分配一些Id，然后只为它们保存状态。例如：

function test(){
    $.ajax({
    //some requests and data sent
    //get the response back
    success:function(responsedata){
        for(i=0;i<responsedata.data;i++):
        {
            var unitID=//some value from the ajax response
            if(somecondition)
            {
                var select=$("#convoy_list"); ''don't forget quotes with selectors. 
                var itemId = "test" + i;
                $('<option>').text(unitID).attr("id", itemId) ''we have set id for option
                                          .appendTo(select);
                var conArr=[];
                conArr=unitID;
                test=JSON.stringify(conArr);
                localStorage.setItem(itemId,test);
            }
        }
    }
    });
}

现在我们可以在fnSelected():中使用该id

function fnSelected(options) {
    var selected = $(options).children(":selected");
    selected.prop("disabled","disabled");
    localStorage.setItem(selected.attr("id") + "disabled", true);
}

现在在display():

function display(){
   for(var i=0;i<localStorage.length;i++){
       var listId = $.parseJSON(localStorage.getItem("test"+i)));
       var select = $("convoy_list");
       var option = $('<option>').text(listId).id(listId);
                                 .appendTo(select);
       if(localStorage.getItem(listId + "disabled") == "true"){
         option.prop("disabled","disabled");
       }
       option.appendTo(select);
   }
}

此外，您可能无意在fnSelected中使用以下快捷方式：var a = b = val;与b = val; var a = b; 相同

所以你的fnSelected（）函数相当于

function fnSelected(selctdOption){
      selctdOption.options[selctdOption.selectedIndex].disabled=true;
      var vehId = selctdOption.options[selctdOption.selectedIndex].disabled;
      localStorage.setItem("vehId",vehId); '' and "vehId" is just a string, always the same.
}

小心一些错误，我没有测试所有这些，但希望逻辑能被理解。

相关文章：