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. Android中的android:layout_width和android:width

    最近在看android的东西,发现很多和web前台的东西一样(思想).只是看到很多属性的写法和前台有差别,刚刚看到这样的属性: android:width 其实是定义控件上面的文本(TextView) ...

  2. EasyDSS RTMP流媒体解决方案之直播录像自动清理方案

    本文转自Marvin的博客: http://blog.csdn.net/marvin1311/article/details/78660592 EasyDSS_Solution直播录像清理 直播录像, ...

  3. Double Check Locking 双检查锁机制

    方法保证了多线程并发下的线程安全性.这里在声明变量时使用了volatile关键字来保证其线程间的可见性:在同步代码块中使用二次检查,以保证其不被重复实例化.集合其二者,这种实现方式既保证了其高效性,也 ...

  4. css jquery 实现轮播效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. c++中的重载、覆盖和隐藏

    1 重载发生在同一个类内部. 同一个类内部,具有相同的函数名,但是参数列表不同,那么就是重载.因为c++编译器编译时,将函数名和函数列表一起对函数进行了重命名. 2 覆盖和隐藏发生在子类和父类之间. ...

  6. HTML 学习笔记 JQuery（锋利的JQuery 代码）

    一 制作简单的导航栏 <html> <head> <meta charset="UTF-8"> <title></title& ...

  7. 深入理解Java虚拟机到底是什么（转）

    原文链接:http://blog.csdn.net/zhangjg_blog/article/details/20380971 什么是Java虚拟机   作为一个Java程序员,我们每天都在写Java ...

  8. POJ - 1611 The Suspects 【并查集】

    题目链接 http://poj.org/problem?id=1611 题意 给出 n, m 有n个人 编号为 0 - n - 1 有m组人 他们之间是有关系的 编号为 0 的人是 有嫌疑的 然后和 ...

  9. 利用iOS原生系统进行人脸识别+自定义滤镜（GPUImage）

    人脸识别+滤镜效果(基于GPUImage实现的自定义滤镜) 最近碰到一个好玩的需求.说要客户端这边判定一下是否有人脸.在有的基础上.对相片做进一步的美化滤镜处理. 首先是人脸的识别判定; //将图片对 ...

  10. Tomcat部署java项目java.lang.OutOfMemoryError异常解决方法

    java.lang.OutOfMemoryError异常解决方法 Window系统环境下,在catalina.bat文件第一行添加以下内容 set JAVA_OPTS=-Xms512m -Xmx512 ...