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 ...
随机推荐
- c字符指针与字符数组的区别
1.定义 char *pchar; //定义了指针,没赋值之前不能使用.如果:printf("*pchar:%c\n",*pchar); 出现段错误Segmentation fa ...
- 剑指offer-顺时针打印矩阵19
题目描述 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下4 X 4矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数 ...
- java poi技术读取到数据库
https://www.cnblogs.com/hongten/p/java_poi_excel.html java的poi技术读取Excel数据到MySQL 这篇blog是介绍java中的poi技术 ...
- 150命令之线上查询及帮助命令 man hellp
150命令之线上查询及帮助命令 man 查询命令的帮助 man + 命令 NAME ls - list directory contents 命令+命令简单说明 SYNOPSIS ...
- hadoop参数(未完).md
我X,有违禁词.麻烦提醒一下哪个词好吗?
- 接口_requests_基于python
HTTP request python官方文档:http://cn.python-requests.org/zh_CN/latest/ 1. 环境 基于环境,需要安装requests 模块,安装方法 ...
- node包管理相关
切换npm数据源 镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候配置还在): 1.通过config命令 npm config set registry https ...
- lintcode-167-链表求和
167-链表求和 你有两个用链表代表的整数,其中每个节点包含一个数字.数字存储按照在原来整数中相反的顺序,使得第一个数字位于链表的开头.写出一个函数将两个整数相加,用链表形式返回和. 样例 给出两个链 ...
- 菜鸟的飞翔日记-os篇
一轮王道os复习感想 1概述 虽然去年有上操作系统这门必修课,考的成绩也算理想,本来还有点沾沾自喜,嗯,觉得自己学的还不错,知道有一天我拿起了王道,(没给王道打广告)看王道的原因完全在于为考研做准备, ...
- Delphi实现在数据库中存取图像
向窗体上添加一个TListBox组件.一个TImage组件和一个TTable组件,设计完成的主界面如图1所示. 图1 主界面 本系统中需要设计一个新的基于Paradox 7的数据库Image.db,图 ...