Question

因此我尝试使用交互式HTML表单制作网站。但我似乎无法使其发挥作用。互动的意思是：例如：如果我在以下之间选择饮料：可乐芬达雪碧百事可乐

当我选择百事可乐时，我想让它显示另一个HTML表单，让我选择与我选择的第一件事相关的东西。例如，如果我选择百事可乐，它会告诉我这个：

百事可乐百事可乐橙百事香蕉

然后当我选择其中一个时，它会向我显示另一个HTML表单，让我选择另一个与我的第一和第二选择相关的内容。例如：如果我选择百事可乐，那么百事可乐橙会让我选择：

2000 2013 2020

到目前为止，我已尝试使用Scripts（使用Javascript）

这是我尝试过的：

    <!DOCTYPE html>
<html>
<body>

<form>
  <select name="drink">
    <option value="cola">Cola</option>
    <option value="fanta">Fanta</option>
    <option value="sprite">Sprite</option>
    <option value="pepsi">Pepsi</option>
  </select>
  <br><br>
  <input type="submit">
</form>
<script>
    if (drink=pepsi) {

        <html>
        <form>
      <select name="variant">
     <option value="pcola">Pepsi Cola</option>
     <option value="orange">Pepsi Orange</option>
     <option value="banana">Pepsi Banana</option>
    </select>
    <br><br>
    <input type="submit">
</form>
 </html>
}
</script>


    <script>
    if (variant=orange) {

        <html>
        <form>
      <select name="year">
     <option value="2000">2000</option>
     <option value="2013">2013</option>
     <option value="2020">2020</option>
    </select>
    <br><br>
    <input type="submit">
</form>
 </html>
}
</script>


</body>
</html>

Answer 1

对于您所描述的交互级别，您不需要javascript。

只需2行css即可实现您所描述的内容：

li ul {display:none;}
li input:checked + ul {display:block;}

示例：

li ul {display:none;} li input:checked + ul {display:block;}

<form> <ul> <li><input type="radio" name="drink" value="Cola" />Cola</li> <li><input type="radio" name="drink" value="Fanta" />Fanta</li> <li><input type="radio" name="drink" value="Sprite" />Sprite</li> <li><input type="radio" name="drink" value="Pepsi" />Pepsi <ul> <li><input type="radio" name="flavour" value="pepsiCola" />Pepsi Cola</li> <li><input type="radio" name="flavour" value="pepsiOrange" />Pepsi Orange <ul> <li><input type="radio" name="date" value="2000" />2000</li> <li><input type="radio" name="date" value="2013" />2013</li> <li><input type="radio" name="date" value="2020" />2020</li> </ul> </li> <li><input type="radio" name="flavour" value="pepsiBanana" />Pepsi Banana</li> </ul> </li> </ul> </form>

Answer 2

了解JS方法：getElementById，getElementsByTagName，...

例如：

if (document.getElementById('value') == 'cola')

...返回您选择的值，然后使用它来更改表单的内容....

使用'='分配，但在构造中使用'==。

Answer 3

尝试使用设置为script type的{{1}}元素来存储text/html form个字符串，附加html和.onchange .onsubmit处理动态内容的事件;使用document将.innerHTML元素内容附加到script;在document.body调整条件以使用严格相等if运算符;将之前的=== form和select元素input type="submit"属性设置为disabled

true

如何使HTML表格互动？

3 个答案: