1.

 <%@ page language="java" contentType="text/html;charset=UTF-8"%>

 <%@ taglib prefix="s" uri="/struts-tags" %>

 <html>

   <head>

     <title>上传歌曲</title>

     <script type="text/javascript">

        var totalSinger = 1;

        function selectSingerType(s){

          switch(s.options[s.selectedIndex].value){

           case "1":

              document.getElementById("bandNameDiv").style.display="none";

              document.getElementById("addButton").disabled = true;

              break;

          case "2":

              document.getElementById("bandNameDiv").style.display="none";

               document.getElementById("addButton").disabled = false;

              break;

          case "3":

              document.getElementById("bandNameDiv").style.display="";

               document.getElementById("addButton").disabled = false;

              break;

          }

           var innerHtml = "";

            innerHtml += '歌手姓名:<input type="text" name="singerDtos[0].name"><br>';

            innerHtml += '歌手国籍：<select name="singerDtos[0].region">';

            innerHtml += '<option value="china" selected>华人歌手</option>';

            innerHtml += '<option value="korea">韩国歌手</option>';

            innerHtml += '<option value="japan">日本歌手</option>';

            innerHtml += '<option value="occident">欧美歌手</option>';

            innerHtml += '</select><br>';

            innerHtml += '歌手性别：<select name="singerDtos[0].sex">';

            innerHtml += '<option value="m">男</option>';

            innerHtml += '<option value="w">女</option>';

            innerHtml += '</select><br>';

            document.getElementById("singers").innerHTML = innerHtml;

        }

        function add(){

            var innerHtml = document.getElementById("Singers").innerHTML;

            innerHtml += '歌手姓名:<input type="text" name="singerDtos[' + totalSinger + '].name"><br>';

            innerHtml += '歌手国籍：<select name="singerDtos['+ totalSinger +'].region">';

            innerHtml += '<option value="china" selected>华人歌手</option>';

            innerHtml += '<option value="korea">韩国歌手</option>';

            innerHtml += '<option value="japan">日本歌手</option>';

            innerHtml += '<option value="occident">欧美歌手</option>';

            innerHtml += '</select><br>';

            innerHtml += '歌手性别：<select name="singerDtos[' + totalSinger + '].sex">';

            innerHtml += '<option value="m">男</option>';

            innerHtml += '<option value="w">女</option>';

            innerHtml += '</select><br>';

            totalSinger++;

            document.getElementById("singers").innerHTML = innerHtml;

        }

     </script>

   </head>

   <body>

   <div align="center">

    <s:form action="uploadSong.action" enctype="multipart/form-data">

        <h3 align="center">上传歌曲</h3>

         歌曲名称：<input type="text" name="songName"><br>

         选择上传的歌曲：<input type="file" name="upload"><br>

           歌手类型： <select name="type" onchange="selectSingerType(this)">

           <option value="1" selected>单人歌手</option>

           <option value="2">组合歌手</option>

           <option value="3">乐队</option>

        </select>

        <div id="bandNameDiv" style="display:none">

           乐队名称:<input type="text" name="bandName">

        </div>

        <div id="singers">

            歌手姓名：<input type="text" name="singerDtos[0].name"><br>

            歌手国籍： <select name="singerDtos[0].region">

                <option value="china" selected>华人歌手</option>

                <option value="korea">韩国歌手</option>

                <option value="japan">日本歌手</option>

                <option value="occident">欧美歌手</option>

           </select><br>

          歌手性别：<select name="singerDtos[0].sex">

                <option value="m">男</option>

                <option value="w">女</option>

           </select><br>

        </div>

        <input type="submit" value="上传">

     </s:form>

     <div id="addSinger" align="center">

        <input type="button" value="添加歌手" id="addButton" onclick="add()" disabled>

     </div>

    </div>

   </body>

 </html>

js修改页面动态添加input框显示与按钮可编辑的更多相关文章

  1. h5 页面点击添加添加input框

    h5 页面点击添加添加input框 前段时间有个需求,页面要能点击添加按钮控制input框的个数,当时感觉有点难,就没做,这两个又遇到了,没办法写了个简单的 效果图,加号增加,减号减少 直接上代码, ...

  2. JS对select动态添加option操作 （三级联动） （搜索拼接）

    以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...

  3. js对select动态添加和删除OPTION

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  4. JS对select动态添加options操作[IE&FireFox兼容]

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  5. 使用js对select动态添加和删除OPTION示例代码

    动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助   <s ...

  6. 使用js对select动态添加和删除OPTION

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  7. ASP.NET页面动态添加js脚本

    有时我们需要生成自己的JavaScript代码并在运行时动态添加到页面,接下来我们来看一下如何将生成的JavaScript代码动态添加到ASP.NET页面. 为了添加脚本,要将自定义的脚本在一个字符串 ...

  8. 在jsp页面动态添加，删除文本框模块

    jsp代码============ <table class="crud-content-info" > <tr > <td align=" ...

  9. 通过jquery来实现文本框和下拉框动态添加效果，能根据自己的需求来自定义最多允许添加数量，实用的jquery动态添加文本框特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 多媒体开发之---h264 高度和宽度获取

    ( School of Computer Science & Technology, Soochow University,SuZhou 215006:) Abstract: H.264 is ...

  2. [Python]xlrd 读取excel 日期类型2种方式

    有个excle表格须要做一些过滤然后写入数据库中,可是日期类型的cell取出来是个数字,于是查询了下解决的办法. 主要的代码结构 data = xlrd.open_workbook(EXCEL_PAT ...

  3. function declarations are hoisted and class declarations are not 变量提升

    Classes - JavaScript | MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes ...

  4. 流畅python学习笔记：第十二章：子类化内置类型

    子类化内置类型 在python2.2之后,内置类型都可以子类化,但是有一个注意事项:内置类型不会调用用户定义的类覆盖的特殊方法.这个说起来比较绕口,什么意思呢.我们来看下下面的代码: class Do ...

  5. Java for LeetCode 129 Sum Root to Leaf Numbers

    Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represent a number ...

  6. Java for LeetCode 120 Triangle

    Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacent n ...

  7. ios点击链接直接跳转到 App Store 指定应用下载页面

    //跳转到应用页面 NSString  *str = [NSString stringWithFormat:@"http://itunes.apple.com/us/app/id%d&quo ...

  8. linux系统调用mount全过程分析【转】

    本文转载自:https://blog.csdn.net/skyflying2012/article/details/9748133 系统调用本身是软中断,使用系统调用,内核也陷入内核态,异常处理,找到 ...

  9. linux系统 标准目录及其内容

      路径名 操作系统 内容 /bin 所有 最核心的操作系统命令 /boot LS 内核和加载内核所需的文件 /dev 所有 伪终端,磁盘,打印机等的设备项 /etc 所有 关键的启动文件和配置文件 ...

  10. C#高性能Socket服务器SocketAsyncEventArgs的实现(IOCP)

    网址:http://blog.csdn.net/zhujunxxxxx/article/details/43573879 引言 我一直在探寻一个高性能的Socket客户端代码.以前,我使用Socket ...