js修改页面动态添加input框显示与按钮可编辑
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框显示与按钮可编辑的更多相关文章
- h5 页面点击添加添加input框
h5 页面点击添加添加input框 前段时间有个需求,页面要能点击添加按钮控制input框的个数,当时感觉有点难,就没做,这两个又遇到了,没办法写了个简单的 效果图,加号增加,减号减少 直接上代码, ...
- JS对select动态添加option操作 （三级联动） （搜索拼接）
以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...
- js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- JS对select动态添加options操作[IE&FireFox兼容]
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- 使用js对select动态添加和删除OPTION示例代码
动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助 <s ...
- 使用js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- ASP.NET页面动态添加js脚本
有时我们需要生成自己的JavaScript代码并在运行时动态添加到页面,接下来我们来看一下如何将生成的JavaScript代码动态添加到ASP.NET页面. 为了添加脚本,要将自定义的脚本在一个字符串 ...
- 在jsp页面动态添加，删除文本框模块
jsp代码============ <table class="crud-content-info" > <tr > <td align=" ...
- 通过jquery来实现文本框和下拉框动态添加效果，能根据自己的需求来自定义最多允许添加数量，实用的jquery动态添加文本框特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 再看GS线程
再看GS线程 void GameServer::ProcessThreadTry() { ; packet rcvPkt; rcvPkt.data = * ]; //该事件工厂主要创建了两个定时器1. ...
- 【BZOJ4843】[Neerc2016]Expect to Wait 排序
[BZOJ4843][Neerc2016]Expect to Wait Description ls最近开了一家图书馆,大家听说是ls开的,纷纷过来借书,自然就会出现供不应求的情况, 并且借书的过程类 ...
- 【BZOJ2843】极地旅行社 离线+树链剖分+树状数组
[BZOJ2843]极地旅行社 Description 不久之前,Mirko建立了一个旅行社,名叫“极地之梦”.这家旅行社在北极附近购买了N座冰岛,并且提供观光服务.当地最受欢迎的当然是帝企鹅了,这些 ...
- 九度OJ 1036：Old Bill （老比尔） （基础题）
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:2691 解决:1432 题目描述: Among grandfather's papers a bill was found. 72 ...
- angularJs自定义模块
<script type="text/javascript"> var myApp = angular.module("myApp",[]); my ...
- Bootstrap——全局CSS样式
1.栅格系统 containter:用于固定宽度并支持响应式布局的容器 container-fluid:用于100%宽度,占据全部视口(viewport)的容器 row:行,必须在container或 ...
- fragment静态加载
import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.util.Log; / ...
- Java多线程系列 基础篇05 synchronized关键字
1. synchronized原理 在java中,每一个对象有且仅有一个同步锁,所以同步锁是依赖于对象而存在.当我们调用某对象的synchronized方法时,就获取了该对象的同步锁.例如,synch ...
- POJ1113 Wall —— 凸包
题目链接:https://vjudge.net/problem/POJ-1113 Wall Time Limit: 1000MS Memory Limit: 10000K Total Submis ...
- Linux学习之路（五）压缩命令
常用压缩格式: .zip .gz .bz2 常用压缩格式: .tar.gz .tar.bz2 .zip格式压缩 .zip 压缩文件名 源文件 #压缩文件 .zip -r 压缩文件名 源目录 #压缩目录 ...