如何使用不同的輸入字段創建動態選擇選項？

如果選擇選項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

如何使用不同的輸入字段創建動態選擇選項？

回答

相關問題