Question

如果选择了选项1，则应显示两个按钮。如果选择了选项2，则应显示一个按钮和一个输入字段。如果选择选项3，则应显示两个输入字段。使用此代码，一切都没有改变。

<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript">
    function vidType() {
      var s1 = document.getElementById(select1);
      if (s1.value == "Video File") {
        var btn1 = document.createElement("BUTTON");
        var t = document.createTextNode("UPLOAD IMAGE");
        btn1.appendChild(t);
        var btn2 = document.createElement("BUTTON");
        var t2 = document.createTextNode("UPLOAD VIDEO");
        btn2.appendChild(t2);
      } else if (s1.value == "Youtube Video") {
        var btn3 = document.createElement("BUTTON");
        var t3 = document.createTextNode("UPLOAD IMAGE");
        btn3.appendChild(t3);
        var x = document.createElement("INPUT");
        x.setAttribute("type", "text");
        x.setAttribute("value", "Paste URL here");
        document.body.appendChild(x);
      } else if (s1.value == "Other Video") {
        var y = document.createElement("INPUT");
        y.setAttribute("type", "text");
        y.setAttribute("value", "Paste URL of the Video");
        document.body.appendChild(y);
        var z = document.createElement("INPUT");
        z.setAttribute("type", "text");
        z.setAttribute("value", "Paste thumbnail URL here");
        document.body.appendChild(z);
      }
    }
  </script>
</head>

<body>
  Choose Video Type:
  <select id="select1" name="select1" onchange="vidType()">
    <option value="Select Type">Select Video Type</option>
    <option value="Video File">Video File</option>
    <option value="Youtube Video">Youtube Video</option>
    <option value="Other Video">Other Video</option>
    </select>
</body>

</html>

Answer 1

这条线似乎只有问题

var s1 = document.getElementById(select1);

如果您将其更改为

var s1 = document.getElementById("select1");

它会起作用。它不起作用的原因是元素id应该作为字符串传递，即用单引号或双引号括起来。

如何使用不同的输入字段创建动态选择选项？

1 个答案: