js修改页面动态添加input框显示与按钮可编辑

1.

 1 <%@ page language="java" contentType="text/html;charset=UTF-8"%>
 2 <%@ taglib prefix="s" uri="/struts-tags" %>
 3 
 4 <html>
 5   <head>
 6     <title>上传歌曲</title>
 7     <script type="text/javascript">
 8        var totalSinger = 1;
 9        function selectSingerType(s){
10          switch(s.options[s.selectedIndex].value){
11           case "1":
12              document.getElementById("bandNameDiv").style.display="none";
13              document.getElementById("addButton").disabled = true;
14              break;
15          case "2":
16              document.getElementById("bandNameDiv").style.display="none";
17               document.getElementById("addButton").disabled = false;
18              break;
19          case "3":
20              document.getElementById("bandNameDiv").style.display="";
21               document.getElementById("addButton").disabled = false;
22              break;
23          }
24           var innerHtml = "";
25            innerHtml += '歌手姓名:<input type="text" name="singerDtos[0].name"><br>';
26            innerHtml += '歌手国籍:<select name="singerDtos[0].region">';
27            innerHtml += '<option value="china" selected>华人歌手</option>';
28            innerHtml += '<option value="korea">韩国歌手</option>';
29            innerHtml += '<option value="japan">日本歌手</option>';
30            innerHtml += '<option value="occident">欧美歌手</option>';
31            innerHtml += '</select><br>';
32            innerHtml += '歌手性别:<select name="singerDtos[0].sex">';
33            innerHtml += '<option value="m"></option>';
34            innerHtml += '<option value="w"></option>';
35            innerHtml += '</select><br>';
36            document.getElementById("singers").innerHTML = innerHtml;
37        }
38        
39        function add(){
40            var innerHtml = document.getElementById("Singers").innerHTML;
41            innerHtml += '歌手姓名:<input type="text" name="singerDtos[' + totalSinger + '].name"><br>';
42            innerHtml += '歌手国籍:<select name="singerDtos['+ totalSinger +'].region">';
43            innerHtml += '<option value="china" selected>华人歌手</option>';
44            innerHtml += '<option value="korea">韩国歌手</option>';
45            innerHtml += '<option value="japan">日本歌手</option>';
46            innerHtml += '<option value="occident">欧美歌手</option>';
47            innerHtml += '</select><br>';
48            innerHtml += '歌手性别:<select name="singerDtos[' + totalSinger + '].sex">';
49            innerHtml += '<option value="m"></option>';
50            innerHtml += '<option value="w"></option>';
51            innerHtml += '</select><br>';
52            totalSinger++;
53            document.getElementById("singers").innerHTML = innerHtml;
54        }
55     </script>
56   </head>
57   <body>
58   <div align="center">
59    <s:form action="uploadSong.action" enctype="multipart/form-data">
60        <h3 align="center">上传歌曲</h3>
61         歌曲名称:<input type="text" name="songName"><br>
62         选择上传的歌曲:<input type="file" name="upload"><br> 
63           歌手类型: <select name="type" onchange="selectSingerType(this)">
64           <option value="1" selected>单人歌手</option>
65           <option value="2">组合歌手</option>
66           <option value="3">乐队</option> 
67        </select>
68        <div id="bandNameDiv" style="display:none">
69           乐队名称:<input type="text" name="bandName">
70        </div>
71        <div id="singers">
72            歌手姓名:<input type="text" name="singerDtos[0].name"><br>
73            歌手国籍: <select name="singerDtos[0].region">
74                <option value="china" selected>华人歌手</option>
75                <option value="korea">韩国歌手</option>
76                <option value="japan">日本歌手</option>
77                <option value="occident">欧美歌手</option>
78           </select><br>
79          歌手性别:<select name="singerDtos[0].sex">
80                <option value="m"></option>
81                <option value="w"></option>
82           </select><br>
83        </div>
84        <input type="submit" value="上传">
85     </s:form>
86     <div id="addSinger" align="center">
87        <input type="button" value="添加歌手" id="addButton" onclick="add()" disabled>
88     </div>
89    </div>
90   </body>
91 </html>
原文地址:https://www.cnblogs.com/sharpest/p/6206202.html