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

如果选择选项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>

来源

2017-08-07 Arijit Dasgupta

如果你打开你的控制台（F12），你会明白为什么它不起作用。 – adeneo

提示：'select1'需要用引号表示...... – adeneo

感谢您指出... –

唯一的问题似乎与这条线

var s1 = document.getElementById(select1);

如果将其更改为

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

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

来源

2017-08-07 20:06:33 ihpar

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

回答

相关问题