zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    45、linux shell命令,ldconfig
    47、linux shell,ln链接
    43、linux shell命令,chmod
    39、linux 进程管理
    46、linux shell命令,chkconfig
    40、linux shell常用函数mkdir,rmdir,mount
    26、linux 几个C函数,nanosleep,lstat,unlink
    38、linux shell常用函数,nice
    44、linux shell命令,ldd
    41、linux shell常用函数,lsof
  • 原文地址:https://www.cnblogs.com/sharpest/p/6206202.html
Copyright © 2011-2022 走看看