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 用webView作为编辑器 各种问题

    1.首先我要说明一下为什么要写这个博客,因为公司最近需要一个自定义的编辑器,苦于没有思路在网上找了好久,看到了好多android实现的编辑器(其实也就那么几个并不多),公司需求和网页端同步共享创建的文 ...

  2. MySQL中使用INNER JOIN来实现Intersect并集操作

    MySQL中使用INNER JOIN来实现Intersect并集操作 一.业务背景 我们有张表设计例如以下: CREATE TABLE `user_defined_value` ( `RESOURCE ...

  3. linux 设置静态IP方法

    本系统使用 linux redhat 7.2 1.   修改ip vi   /etc/sysconfig/network-scripts/ifcfg-eno16777736 2. 修改数据项如下 3. ...

  4. eclipse转到IntelliJ IDEA 2017.1入坑指南

    最近准备从eclipse转到IDE上去,由于eclipse占用的内存太大,而且IDE看着逼格还是比较大的,在转移项目的时候遇到好多的坑呀!在这里记录一下 关于:2017.1版本 之前装的是2016的版 ...

  5. 基于zookeeper或redis实现分布式锁

    前言 在分布式系统中,分布式锁是为了解决多实例之间的同步问题.例如master选举,能够获取分布式锁的就是master,获取失败的就是slave.又或者能够获取锁的实例能够完成特定的操作. 目前比较常 ...

  6. python 基础 2.6 for 循环 和if循环 中break

    python中最基本的语法格式大概就是缩进了.python中常用的循环:for循环,if循环.一个小游戏说明for,if ,break的用法. 猜数字游戏: 1.系统生成一个20以内的随机数 2.玩家 ...

  7. vue-cli3.0升级失败，vue-cli卸载不掉，vue-cli升级不了3.0

    https://juejin.im/post/5bf7d67c51882518805acb1a vue-cli3.0 使用图形化界面创建和管理项目

  8. Eclipse项目中引用第三方jar包时将项目打包成jar文件的两种方式

    转载自:http://www.cnblogs.com/lanxuezaipiao/p/3291641.html 方案一:用Eclipse自带的Export功能 步骤1:准备主清单文件 “MANIFES ...

  9. 【题解】P1613跑路

    [题解]P1613 鸽王跑路 一道思维好题! 考虑\(2^k\)的传递性.直接64遍\(floyd\)求所有\(2^k\)的路径,转移方程是 \(dp(i,j,k)=[dp[i][t][k-1]\)& ...

  10. Java反射详解(转)

    原文地址:http://www.importnew.com/17616.html 动态语言 动态语言,是指程序在运行时可以改变其结构:新的函数可以被引进,已有的函数可以被删除等在结构上的变化.比如众所 ...