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 ...
随机推荐
- Ducci序列 （Ducci Sequence,ACM/ICPC Seoul 2009,UVa1594)
题目描述: 题目思路: 直接模拟 #include<stdio.h> #include<string.h> #define maxn 105 int less(const ch ...
- mysql中的select语句where条件group by ,having , order by,limit的顺序及用法
-- 语法: SELECT select_list FROM table_name [ WHERE search_condition ] [ GROUP BY group_by_expression ...
- Android开发-API指南-<activity>
<activity> 英文原文:http://developer.android.com/guide/topics/manifest/activity-element.html 采集(更新 ...
- JavaScript 之 对象/JSON/数组
对象 简单说,所谓对象,就是一种无序的数据集合,由若干个“键值对”(key-value)构成. var obj = { p: 'Hello World' }; 上面代码中,大括号就定义了一个对象,它被 ...
- mahout协同过滤算法各接口
Mahout协同过滤算法 Mahout使用了Taste来提高协同过滤算法的实现,它是一个基于Java实现的可扩展的,高效的推荐引擎.Taste既实现了最基本的基于用户的和基于内容的推荐算法,同时也提供 ...
- 56[LeetCode] .Merge Intervals
Given an array nums of n integers and an integer target, are there elements a, b, c, and d in nums s ...
- APUE学习笔记3_文件IO
APUE学习笔记3_文件IO Unix中的文件IO函数主要包括以下几个:open().read().write().lseek().close()等.这类I/O函数也被称为不带缓冲的I/O,标准I/O ...
- 实用的ES6特性
1. 函数参数默认值 不使用ES6 为函数的参数设置默认值: function foo(height, color) { var height = height || 50; var color = ...
- Android中的回调Callback
回调就是外部设置一个方法给一个对象, 这个对象可以执行外部设置的方法, 通常这个方法是定义在接口中的抽象方法, 外部设置的时候直接设置这个接口对象即可. 例如给安卓添加按钮点击事件, 我们创建了OnC ...
- 转 【关于api-ms-win-crt-runtimel1-1-0.dll缺失的解决方案】
关于api-ms-win-crt-runtimel1-1-0.dll缺失的解决方案 目录 关于api-ms-win-crt-runtimel1-1-0dll缺失的解决方案 目录 安装VC redite ...