Question

我有一个带有select标签的HTML代码，其中选项是动态填充的。一旦发生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);
}

但这不起作用。

Answer 1

页面上的元素不应具有相同的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.

}

要注意一些错误，我没有测试所有这些，但希望逻辑被理解。

使用localStorage在页面刷新后检索已禁用的属性

1 个答案: