javascript - 根据层次结构重置选择下拉列表

Question

<script>
function refresh()
{
    document.forms[0].submit();
}   
</script>

<select name = "firstoption" onChange ="refresh()"></select>
<option value = "">default option</option>
<option value = "1">1</option>

if($_POST['firstoption]!= "")
<select name = "secondoption" onChange ="refresh()"></select>
<option value = "">default option</option>
<option value = "2">2</option>

if($_POST['secondoption]!= "" && $_POST['firstoption]!= "")
<select name = "thirdoption" onChange ="refresh()"></select>
<option value = "">default option</option>
<option value = "3">3</option>

if($_POST['thirdoption]!= "" && $_POST['secondoption]!= "" && $_POST['firstoption]!= "")
<select name = "fourthoption" onChange ="refresh()"></select>
<option value = "">default option</option>
<option value = "4">4</option>

嗨，

我有 6 个静态下拉菜单。 (由于某种原因，我目前遇到笔记本电脑问题，因此我无法复制并粘贴我写下通用值的代码)

已删除(不再是我自己修复的问题)

基本上，我需要 6 个下拉列表(刷新后保留所有值)，并且当下拉列表值更改时，其下面的所有下拉列表都会重置。

编辑:

我正在寻找代码将选择选项重置回默认选择选项(基于层次结构)。一旦选择上面的选项，它就会发生变化。因此，如果选择“2”会发生更改，则选择 3,4,5 6 值应更改为默认选项。如果选择“4”得到更改，则选择 5,6 将更改为默认选项等。

我不需要 ajax 或 jQuery。我正在寻找 php、javascript 或 html 的解决方案。我认为解决这个问题的方法是比较正在更改的选择选项的先前索引号和新索引号

请注意，我提供的代码是 sudo 代码，由于当前笔记本电脑状态，我无法复制和粘贴代码。

所以答案不需要使用我的代码。

我只想要一个具有多个选择选项的 php/javascript/html 代码(4-6 个选择，每个选项有 2 个选项)，另一个下拉列表将被禁用，直到上面的选择获得一个值。因此，选项 2-6 将被禁用，直到选择了选择 1，然后选项 3-6 将被禁用，直到选择了选项 2 的值。

如果用户更改选择 1 选项，则选择 2-6 已经有值。选择2-6自动切换到默认选项值。并且选项 3-6 现在被禁用，直到用户选择选择 2 的选项

此外，堆栈溢出不允许在 24 小时之前提供赏金，因此直到明天这个时间我才能提供赏金。

Answer 1

一些促进解决方案的建议:

• 为所有下拉列表指定相同的 class 属性。
• 仅对容器元素(或整个文档)使用一个更改事件处理程序，并让该处理程序找出哪个 select 值已更改。
• 创建一个函数，根据给定的索引，该函数将清除该索引之后的所有下拉列表，并禁用除第一个(在该索引处)之外的所有下拉列表。
• 在事件处理程序中以及页面加载时调用此函数，以便初始化这些下拉菜单的启用/禁用状态。

下面是它的工作原理。我删除了此解决方案不需要的所有 HTML，但当然您可能需要更多 HTML 属性用于其他目的:

const dropDowns = Array.from(document.querySelectorAll(".option"));

function reset(i) {
    for (let other of dropDowns.slice(i)) {
        other.selectedIndex = 0;
        other.disabled = other !== dropDowns[i];
    }
}

document.addEventListener("change", function (e) {
    let i = dropDowns.indexOf(e.target);
    if (i < 0) return;
    // only allow input in next one if current value is not default:
    reset(i+(dropDowns[i].selectedIndex > 0));
});

reset(0); // on page load, disable all except first one

<select class="option">
  <option>default option</option>
  <option>1</option>
  <option>2</option>
</select>

<select class="option">
  <option>default option</option>
  <option>A</option>
  <option>B</option>
</select>

<select class="option">
  <option>default option</option>
  <option>x</option>
  <option>y</option>
</select>

<select class="option">
  <option>default option</option>
  <option>alpha</option>
  <option>beta</option>
</select>  

更多关于以下内容:

reset(i+(dropDowns[i].selectedIndex > 0));

当选择第一个条目(默认)时，dropDowns[i].selectedIndex 将为 0，而当选择任何其他条目时，则为严格正数。因此，对于> 0，当选择非默认条目时，实际上给出true，否则给出false。

现在，我们希望仅当当前下拉列表选择了非默认条目时，即当此 > 0 表达式为 true 时，下一个 下拉列表才可用。通过在 + 运算中涉及该表达式，我们将该 bool 值转换为数字(0 表示 false，1 表示 true)。因此，整个表达式是 i+0 或 i+1，具体取决于当前下拉列表是否选择了默认值。

通过向 reset 函数提供该索引(i 或 i+1)，我们确保选择默认值的效果值(value)与否取决于需要。