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. java 白皮书的关键术语

    [0]README 0.1) 本文转自 core java volume 1,仅供了解,所谓爱屋及乌嘛: 0.2) java的设计者编写了颇有影响力的白皮书,用来解释设计的初衷以及完成的情况,并发布了 ...

  2. 模式匹配之surf----特征点检测学习_2(surf算法)

    在上篇博客特征点检测学习_1(sift算法) 中简单介绍了经典的sift算法,sift算法比较稳定,检测到的特征点也比较多,其最大的确定是计算复杂度较高.后面有不少学者对其进行了改进,其中比较出名的就 ...

  3. GS(道具，帮会)定时存储

    //最近数据库存储做了重大改变,数据库内部的回头再说,先看看GS这边的 .现在感觉数据库的状态将请求包放入命令队列中,以前是全部放进去,这样让其他的数据库操作不会随着数据库定时器而变慢,GS线程去驱动 ...

  4. Java 学习 day01

    1. 基本常识 2. Java的跨平台性 3. Java环境搭建(安装) 4. Java环境搭建(环境变量配置) 5. Java环境搭建(环境变量配置技巧) 6. Java环境搭建(环境变量临时配置方 ...

  5. MySQL重置root用户密码的方法【亲测可用】

    1. 报错截图 2.当确认已经忘记MySQL密码,则可以通过以下方案重置root用户密码.双击打开C:\Program Files\MySQL\MySQL Server 5.1\my.ini文件,如下 ...

  6. Eclipse打jar包的方法

    1.准备主清单文件 “MANIFEST.MF” Manifest-Version: 1.0 Class-Path: lib/commons-codec.jar lib/commons-httpclie ...

  7. 搭建SVN服务器详细教程

    搭建SVN服务器详细教程 本教程会从最基本的下载安装到上传代码,下载代码这条线来详细讲述如何完成SVN服务器的搭建 下载并安装VisualSVN server 下载并安装TortoiseSVN 导入项 ...

  8. python venv虚拟环境

    1 目的 给python应用一个独立的运行环境,独立于其它的python应用也独立于系统的python环境. 环境升级不影响其它应用. 避免包冲突. 2 创建方式 2.1 pycharm中创建 pro ...

  9. 【题解】 CF734F 【Anton and School】

    题解 CF734F [Anton and School] 传送门 这种将位运算和普通运算结合起来的题目要拆位来考虑,可以得到\(log_{2}(\)值域\()\)的算法,甚至将值域看成常数. 根据 \ ...

  10. python cookbook第三版学习笔记八：解析码流

    Binascii模块 通过名字很容易知道这个模块的作用,binary, ascii.两个字母的合成,也就是二进制和ascii的转换模块 下面先介绍下字母的ascii码 a-z的ascii是从97-12 ...