Question

我希望以此形式创建一个向导，以便根据第一个输入的选项给出第二个输入的选项

<form method="post" action="result.php">
<select>
    <option value="jean">jean</option>
    <option value="t-shirt">t-shirt</option>
</select>

<select>
    // if jean
    <option value="black">Black</option>
    <option value="blue">Blue</option>
    // if t-shirt
    <option value="yellow">Yellow</option>
    <option value="green">Green</option>
</select>
<button type="submit">See products</button>
</form>

例如，如果用户选择T恤，它将向他显示该商品的可用颜色

Answer 1

您可能正在寻找这样的东西

function updateColors(product) {
  document.getElementById("color").innerHTML = {
    "jean":    `<option value="black">Black</option>
                <option value="blue">Blue</option>`,
    "t-shirt": `<option value="yellow">Yellow</option>
                <option value="green">Green</option>`
  }[product];
}

window.onload = ()=>{updateColors("jean");}

<form method="post" action="result.php">
<select onchange="updateColors(this.value)">
    <option value="jean" selected>jean</option>
    <option value="t-shirt">t-shirt</option>
</select>

<select id="color"></select>
<button type="submit">See products</button>
</form>

函数updateColors带有一个值product，它是第一个选择框的值。它使用它来选择要显示的颜色。然后更新该框的HTML。
我们使用第一个选择框的updateColors事件调用onchange。用户选择项目时将触发此事件；这样更改立即发生。由此;我通过了this.value-在这种情况下，this指的是第一个选择框，而value指的是所选value标记的<option>属性。 / li>
我给第二个选择框指定了一个color ID，以便我们可以轻松地引用它并更改其内容。
document.getElementById("color")引用第二个选择框；因此我们可以更改其属性。
.innerHTML属性用于更改给定DOM节点（页面上的元素）的HTML。通过设置，我们可以更改该元素的HTML内容。
然后；我使用字典（在其他语言中称为 map ）。这是一种将键映射到值的数据结构。在这里，jean是一个键，然后颜色牛仔裤的HTML就是值。因此；我们可以通过键获取HTML。同样，t-shirt是另一个键；具有不同的值。
[product]用于获取给定键的值。因此，如果我们传递jean，它将以字符串形式返回给我们设置为键的HTML值。然后;通过innerHTML设置为第二个选择框的HTML代码。
window.onload = ()=>{updateColors("jean");}在页面加载完成后自动调用此功能。这是为了确保表单在用户填写之前就有意义；由于jean是默认选中的，因此将第二个选择框的默认内容设置为牛仔裤的颜色是有道理的。

Answer 2

<form method="post" action="result.php">
<select id="selection" onclick="changeVal()">
    <option value="x">x</option>
    <option value="y">y</option>
</select>

<p id="output"> </p>

<script>
    function changeVal(){
    document.getElementById("output").innerHTML = document.getElementById("selection").value;
    }
</script>

这是我编写的足够简单的脚本。您可以构建它来创建向导

带有Java向导的向导

2 个答案: