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 ...
随机推荐
- An Adaptive Color-Based Particle Filter--粒子滤波
粒子滤波跟踪的具体步骤如下: 1. Resampling the particles to avoid degeneracy 2. Propagate each particles accordin ...
- APUE学习笔记3_文件IO
APUE学习笔记3_文件IO Unix中的文件IO函数主要包括以下几个:open().read().write().lseek().close()等.这类I/O函数也被称为不带缓冲的I/O,标准I/O ...
- Alphabetic Removals(模拟水题)
You are given a string ss consisting of nn lowercase Latin letters. Polycarp wants to remove exactly ...
- Alpha版——版本控制报告（Thunder）
Part One 回答问题: 0.在吹牛之前,先回答这个问题:如果你的团队来了一个新队员,有一台全新的机器,你们是否有一个文档,只要设置了相应的权限,她就可以根据文档,从头开始搭建环境,并成功地把最新 ...
- 11.22Daily Scrum
人员 任务分配完成情况 明天任务分配 王皓南 实现网页上视频浏览的功能.研究相关的代码和功能.979 数据库测试 申开亮 实现网页上视频浏览的功能.研究相关的代码和功能.978 实现视频浏览的功能 王 ...
- 共享程序集GAC
原文标题: 原文地址:https://www.cnblogs.com/1996V/p/9037603.html 共享程序集GAC 我上面说了这么多有关CLR加载程序集的细节和规则,事实上,类似于msc ...
- lintcode-197-排列序号
197-排列序号 给出一个不含重复数字的排列,求这些数字的所有排列按字典序排序后该排列的编号.其中,编号从1开始. 样例 例如,排列 [1,2,4] 是第 1 个排列. 思路 参考http://www ...
- 利用JavaScriptSerializer类 进行Json对象的序列化和反序列化和过滤
项目下载:JavaScriptSerializer_对JSON对象序列化与反序列化及过滤器 利用<JavascriptSerializer类> 进行Json对象的序列化和反序列化 1. 首 ...
- PokeCats开发者日志（十）
现在是PokeCats游戏开发的第三十三天的中午,收到了中国版权保护中心软件登记部发来的受理通知书. 上易版权看一眼,貌似离拿证不远了. 想一想还有点小激动呢!
- 原生javascript自定义input[type=radio]效果
2018年6月27日 更新 找到最为简单的仅仅使用css3的方案 <!DOCTYPE html> <html lang="en"> <head> ...