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. IntelliJ idea webstrom Visual Studio Code vscode 设置cmder为默认终端 Terminal

    1.系统环境win10 2.确保环境变量中存在CMDER_ROOT,没有的话新增一个.地址为*:\***\cmder . idea.webstrom:设置中搜索terminal,shell path  ...

  2. 实现RTSP网站微信直播方案EasyNVR（linux版）部署问题之：ERR_CONTENT_LENGTH_MISMATCH

    发现问题: 想要优化一下EasyNVR相关功能,内部测试软件,于是在linux系统中部署了一台EasyNVR.当部署好,运行起来发现问题: EasyNVR的配置页面数据出不来. 分析问题: 基于是we ...

  3. Linq的优缺点

    优点: 1.Linq提供了不同数据源的抽象层,所以可以使用相同的语法访问不同的数据源(只要该数据源有提供程序即可) 2.Linq为底层的数据存储提供了一个强类型化的界面,可以把底层的数据作为对象来访问 ...

  4. iOS UIWebview添加请求头的两种方式

    1.在UIWebviewDelegate的方法中拦截request,设置request的请求头,废话不多说看代码: - (BOOL)webView:(UIWebView *)webView shoul ...

  5. Software-defined networking

    Software-defined networking administrators to programmatically initialize, control, change, and mana ...

  6. ridge regression 无惩罚，导致预测结果空间过大而无实用价值

    [ biased regression methods to reduce variance---通过偏回归来减小方差] https://onlinecourses.science.psu.edu/s ...

  7. Magnetic Fingerprinting Approach to Indoor Localization

    Magnetic Fingerprinting Approach to Indoor Localization

  8. cocos2d-js添加道有道插屏（通过jsb反射机制）

    1.导入jar包 2.修改AndroidManifest.xml文件 添加权限:      <activity android:configChanges="keyboard|keyb ...

  9. Cocos2d-X开发中国象棋《九》走棋规则

    在上一节中实现了走棋,这篇博客将介绍中国象棋中的走棋规则 在写博客前先可能一下象棋的走棋规则: 1)将 将的坐标关系:横坐标相等,纵坐标相减绝对值等于1,或者纵坐标相等,横坐标相减绝对值等于1 将的特 ...

  10. android 服务与多线程

    android服务是执行在UI主线程的.一下是代码demo: package com.example.testservice; import android.os.Bundle; import and ...