Dom中select练习
选择框checkbox练习
select练习
注意select的selected属性
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>正则表达式</title>
<script type="text/javascript">
function numkeydown() {
var k = window.event.keyCode;
if((k==9)||(k==13)||(k==46)||(k==8)||(k==189)||(k==109)
||(k==190)||(k>=48&&k<=57)||(k>=96&&k<=105)||(k>=37&&k<=40))
{ return true; }
else {
return false;
}
}
function judge(k)
{
if ((k == 9) || (k == 13) || (k == 46) || (k == 8) || (k == 189) || (k == 109)
|| (k == 190) || (k >= 48 && k <= 57) || (k >= 96 && k <= 105) || (k >= 37 && k <= 40))
{ return true; }
else {
return false;
}
}
function ONpasteDeal()
{
var text = window.clipboardData.getData("Text");
for(var i=0;i<text.length;i++)
{
var k = text.charCodeAt(i);
if (!judge(k))
return false;
}
return true;
}
//onkeydown="if(window.event.keyCode == 13) { window.event.keyCode = 9;}
var data = { "山东": ["济南", "德州", "潍坊"], "河南": ["郑州", "洛阳", "三门峡"], "辽宁": ["沈阳", "鞍山", "大连"] };
function loadProv()
{
var prov = document.getElementById("prov");
for(var key in data)
{
var option = document.createElement("option");
option.value = key;
option.innerText = key;
prov.appendChild(option); }
//ResponsetoCity();
}
function ResponsetoCity()
{
var prov = document.getElementById("prov"); var city = document.getElementById("city");
//city.options.length = 0;
if (prov.value == "none")
return;
for (var i =city.childNodes.length-1; i >= 0; i--)
{
city.removeChild(city.childNodes[i]);
}
var key = prov.value; for (var i in data[key])
{
var option=document.createElement("option");
option.innerText = data[key][i];
option.value = data[key][i];
city.appendChild(option);
}
}
function SelectAll()
{
var playlist = document.getElementById("selectdiv");
var input = playlist.getElementsByTagName("input");
for(var i=0;i<input.length;i++)
if (input[i].type == "checkbox") {
input[i].checked = "checked";
}
}
function NoSelectAll() {
var playlist = document.getElementById("selectdiv");
var input = playlist.getElementsByTagName("input");
for (var i = 0; i < input.length; i++)
if (input[i].type == "checkbox") {
input[i].checked = "";
}
}
function ReverseSelect() {
var playlist = document.getElementById("selectdiv");
var input = playlist.getElementsByTagName("input");
for (var i = 0; i < input.length; i++)
if (input[i].type == "checkbox") {
if (input[i].checked == true)
input[i].checked = "";
else input[i].checked = "checked";
}
}
</script> </head>
<body bgcolor="blue" onload="loadProv()">
<select id="prov" onchange="ResponsetoCity()"><option>请选择省</option></select>
<select id="city"style="width:80px"></select><br/>
<input type="text"><input type="text"onpaste="return ONpasteDeal();"style="ime-mode:disabled;" onkeydown="return numkeydown();"/><br/>
<input type="text"><input type="text"style="text-align:right;ime-mode:disabled">
<br/><br/><br/><br/>
<div id="selectdiv" style="position:absolute;">
<input type="checkbox" id="p1" /><label for="p1">天蝎座</label><br />
<input type="checkbox" id="p2" /><label for="p2">水瓶座</label><br />
<input type="checkbox" id="p3" /><label for="p3">巨蟹座</label><br />
<input type="checkbox" id="p4" /><label for="p4">摩羯座</label><br />
<input type="checkbox" id="p5" /><label for="p5">双子座</label><br />
<input type="checkbox" id="p6" /><label for="p6">金牛座</label><br />
<input type="checkbox" id="p7" /><label for="p7">处女座</label><br />
<input type="checkbox" id="p8" /><label for="p8">白羊座</label><br />
<input type="checkbox" id="p9" /><label for="p9">射手座</label><br />
<input type="checkbox" id="p10" /><label for="p10">双鱼座</label><br />
<input type="checkbox" id="p11" /><label for="p11">天秤座</label><br />
<input type="checkbox" id="p12" /><label for="p12">狮子座</label><br /> <input type="button" value="全选" onclick="SelectAll()" />
<input type="button" value="全不选" onclick="NoSelectAll()" />
<input type="button" value="反选" onclick="ReverseSelect()" />
</div>
<div style="position:absolute;left:30%;width:30%;">
<select id="sel1" multiple="multiple" size="10" style="float:left;width:30%;">
<option value="add">添加</option>
<option value="print">打印</option>
<option value="delete">删除</option>
<option value="modify">修改</option>
<option value="look">查询</option>
<option value="cli">点击</option>
<option value="chag">改变</option>
<option value="away">抹去</option>
<option value="kill">杀死</option>
<option value="evt">肇事</option>
</select>
<div style="float:left">
<input type="button" value=">>" onclick="ToAll()" style="float:left;width:100%" />
<input type="button" value="<<" onclick="FromAll()" style="float:left;width:100%" />
<input type="button" value=" > " onclick="MoveFromTo()" style="float:left;width:100%" />
<input type="button" value=" < " onclick="MoveToFrom()" style="float:left;width:100%" /> </div>
<select id="sel2" multiple="multiple" size="10" style="float:left;width:30%;"></select>
</div>
<script type="text/javascript">
function MoveFromTo()
{
var sel = document.getElementById("sel1");
var sel2 = document.getElementById("sel2");
for (var i = 0; i < sel.childNodes.length; i++)
{
if(sel.childNodes[i].selected==true)
{
var option = sel.childNodes[i];
option.selected = false;
sel2.appendChild(option);
i--;
}
}
}
function MoveToFrom()
{
var sel = document.getElementById("sel1");
var sel2 = document.getElementById("sel2");
for (var i = 0; i < sel2.childNodes.length; i++) {
if (sel2.childNodes[i].selected==true) {
var option = sel2.childNodes[i];
option.selected = false;
sel.appendChild(option);
i--;
}
}
}
var ToAll = function () {
var sel = document.getElementById("sel1");
var sel3 = document.getElementById("sel2"); for (; sel.childNodes.length > 0;)
{
var option = sel.childNodes[0];
option.selected = false;
sel3.appendChild(option); }
}
var FromAll = function () {
var sel = document.getElementById("sel1");
var sel3 = document.getElementById("sel2"); for (; sel3.childNodes.length>0;) {
var option = sel3.childNodes[0];
option.selected = false;
sel1.appendChild(option); }
}
</script>
</body>
</html>
Dom中select练习的更多相关文章
- JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结
JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode 父节点 childNodes ...
- JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}
前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...
- SQL Server中SELECT会真的阻塞SELECT吗？
在SQL Server中,我们知道一个SELECT语句执行过程中只会申请一些意向共享锁(IS) 与共享锁(S), 例如我使用SQL Profile跟踪会话86执行SELECT * FROM dbo.T ...
- javascript判断元素存在和判断元素存在于实时的dom中的方法
今天(周六)下午我在公司加班时不知道要干什么,就打开公司的一个wordpress项目网站,想看下之前自己做的一个网页是否有问题. 打开网站首页,我习惯性的打开了chrome的调试工具,然后鼠标开始滚动 ...
- DOM中的事件对象
三.事件对象事件对象event1.DOM中的事件对象(1).type:获取事件类型(2).target:事件目标(3).stopPropagation() 阻止事件冒泡(4).preventDefau ...
- MySQL中select * for update锁表的范围
MySQL中select * for update锁表的问题 由于InnoDB预设是Row-Level Lock,所以只有「明确」的指定主键,MySQL才会执行Row lock (只锁住被选取的资料例 ...
- MySQL中select * for update锁表的问题
MySQL中select * for update锁表的问题 由于InnoDB预设是Row-Level Lock,所以只有「明确」的指定主键,MySQL才会执行Row lock (只锁住被选取的资料例 ...
- DOM中元素节点、属性节点、文本节点的理解
DOM中元素节点.属性节点.文本节点的理解 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) ...
- 查询语句中select from where group by having order by的执行顺序
查询语句中select from where group by having order by的执行顺序 1.查询中用到的关键词主要包含六个,并且他们的顺序依次为 select--from--w ...
随机推荐
- Java Web开发框架Spring+Hibernate整合效果介绍（附源码）（已过期，有更好的）
最近花了一些时间整合了一个SpringMVC+springAOP+spring security+Hibernate的一套框架,之前只专注于.NET的软件架构设计,并没有接触过Java EE,好在有经 ...
- 使用flume抓取tomcat的日志文件下沉到kafka消费
Tomcat生产日志 Flume抓取日志下沉到kafka中 将写好的web项目打包成war包,eclise直接导出export,IDEA 在artifact中添加新的artifact-achieve项 ...
- netty in action 笔记 二
netty的数据容器 网络数据的基本单位大多为字节,Java NIO 提供了ByteBuffer 作为它的字节容器,但使用起来过于复杂和繁琐.在Netty中, ByteBuffer 替代品是ByteB ...
- LeetCode 145 ——二叉树的后序遍历
1. 题目 2. 解答 2.1. 递归法 定义一个存放树中数据的向量 data,从根节点开始,如果节点不为空,那么 递归得到其左子树的数据向量 temp,将 temp 合并到 data 中去 递归得到 ...
- HADOOP docker(十):hdfs 结构体系
1.简介2.namenode和datanode3.The File System Namespace 文件系统命名空间4.Data Replication 数据复制5.Replica Placemen ...
- Thunder团队第五周 - Scrum会议5
Scrum会议5 小组名称:Thunder 项目名称:i阅app Scrum Master:翟宇豪 工作照片: 杨梓瑞同学在拍照,所以不在照片内. 参会成员: 王航:http://www.cnblog ...
- java---StringBuilder类的用法（转载）
转载自http://blog.csdn.net/zi_jun/article/details/7624999 String对象是不可改变的.每次使用 System.String类中的方法之一时,都要在 ...
- 《剑指offer》---字符串的全排列
本文算法使用python3实现 1.问题一 1.1 题目描述: 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc ...
- LintCode-365.二进制中有多少个1
二进制中有多少个1 计算在一个 32 位的整数的二进制表式中有多少个 1. 样例 给定 32 (100000),返回 1 给定 5 (101),返回 2 给定 1023 (111111111),返回 ...
- .net平台借助第三方推送服务在推送Android，IOS消息（极光推送_V3版本）最新
最近刚从极光推送官网上看到V2版本要停用,不得不有重新写V3版本的.这里用到了 HTTP Basic Authentication http://www.cnblogs.com/pingming/p/ ...