我有一个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.
}
小心一些错误,我没有测试所有这些,但希望逻辑能被理解。