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 ...
随机推荐
- 聊一聊 Flex 中的 flex-grow、flex-shrink、flex-basis
在使用 flex 布局的时候难以理解的是 flex-grow.flex-shrink.flex-basis 几个属性的用法,下面通过几个例子来演示. flex-basis flex-basis 用于设 ...
- /etc/fstab 文件如何填写(转)
转载自 http://hi.baidu.com/jingzhongchen/blog/item/8e6f552dcead7ce98b139952.html 看你对/etc/fstab文件了解多少? ...
- NSValue的valueWithBytes:objCType:方法
+ (NSValue *)valueWithBytes:(const void *)value objCType:(const char *)type; NSValue的valueWithBytes: ...
- 一个demo让你彻底理解Android中触摸事件的分发
注:本文涉及的demo的地址:https://github.com/absfree/TouchDispatch 1. 触摸动作及事件序列 (1)触摸事件的动作 触摸动作一共有三种:ACTION_DOW ...
- <Android>对话框的使用
Android系统提供四种对话框:警告对话框(AlertDialog),进度对话框(ProgressDialog),日期选择对话框(DatePickerDialog)和时间选择对话框(TimePick ...
- Gitkraken系列-Gitkraken使用操作
一个优秀的团队合作离不开git,一个优秀的程序员也离不开git.gitkraken是我在进行软工实践这门课接触到的git的UI界面的工具,它给我留下的印象就是非常好用和方便 怎么个方便法呢? 方便的安 ...
- vc6.0批量加注释
MATLAB批量加注释的方法非常简单明了,加注释是ctrl+R,去注释是ctrl+T 然后在VC中我对一条一条加注释的方法非常烦恼,我想也许会有简单的方法可以批量家注释.果然,先贴代码 '------ ...
- Ehcache概念篇
前言 缓存用于提供性能和减轻数据库负荷,本文在缓存概念的基础上对Ehcache进行叙述,经实践发现3.x版本高可用性不好实现,所以我采用2.x版本. Ehcache是开源.基于缓存标准.基于java的 ...
- MATLAB中的randi函数
randi Pseudorandom integers from a uniform discrete distribution.来自一个均匀离散分布的伪随机整数 R = randi(IMAX,N) ...
- C++基础知识（二）
八. 继承:让某个类的对象获得另一个类的对象的特性.通过继承可实现代码重用,即从已存在的类派生出的一个新类将自动具有原来那个类的特性. 类的继承还具有:(1)单向性:A类为B类的基类(父类),则派生类 ...