在之前的下拉列表中选中某个选项后，删除该选项

Remove an option once it is selected in previous dropdowns

本文关键字：选项 删除 下拉列表      更新时间：2023-09-26

我需要删除下拉菜单中被选中的选项。例如，第一个、第二个和第三个下拉列表包含A、B、C、d。一旦我在下拉列表1中选择了A，它就不会同时出现在下拉列表2和3中。

但是在我的代码中，实际上是这样的:

我在PHP中通过循环填充了几个下拉列表。

for($y=1; $y<=5; $y++){
echo "<select id='seatplan$x' name='selectSeatplan[]' onChange='callSave($x,$sid)'>";
     echo "<select name='selectSeatplan[]'>";
     echo "<option value=''> ------------ </option>";
          seatplanDdNames($sid);
     echo "</select>";
} //END FOR Y<-5

请注意* seatplanDdNames($sid) -是一个从数据库生成名称的函数，下面是我如何从它返回选项:

function seatplanDdNames($sid) {
     echo "<option value='$studentno' onClick='callSave($x,$sid)'>$name</option>";
}
然后javascript函数callSave: 
function callSave(x,sid){
    var name = 'seatplan' + x;
    name = name.toString();
    var selectBox = document.getElementById(name);
    var strUser = selectBox.options[selectBox.selectedIndex].value;
    var js = document.createElement('script');
        js.setAttribute('language', 'javascript');
        js.setAttribute('type', 'text/javascript');
        js.setAttribute('src', 'seatplan-getvalues.php?uid='+strUser+'&sid='+sid+'&rtype=CLS&seatno='+x);
    document.body.appendChild(js);
    return false;
    }
  • callSave函数将选择的选项保存在临时表中。就像我喜欢的那样。问题是，我必须避免下拉菜单中提供的数据冗余。

帮忙吗?谢谢你！

这是一个纯HTML/JS的例子。基本上在页面加载时，每个选择都有相同的选项。

来自Lolo的代码工作得很好，但我需要在o.disabled = true中更改style.dispaly = 'none'，以避免在OSX和iOS中使用Chrome/Safari(元素未隐藏)的问题

if (p == undefined || p == s) {
  o.disabled = false;
}
// option otherwise
else {
  o.disabled = true;
}

行为不同，结果相同。

相关文章：