select组件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>selext组件的演示</title>
<script type="text/javascript">
function changeColor(selectC){
/* select知识点：
1.options是一个数组--select中的所有选项，2.selectIndex是选择数组中的下标值--选择select组件中的哪一项
*/
document.getElementById("text").style.color=selectC.options[selectC.selectedIndex].value;
}
function changColor2(oDiv){
document.getElementById("text").style.color=oDiv.style.backgroundColor;
}
</script>
<style type="text/css">
.c{
width: 50px;
height: 50px;/* 这个地方是设置div标签的大小 */
float:left;
margin-left: left;
}
</style>
</head>
<body>
<h1>演示select组件</h1>
<select onchange="changeColor(this);"><!-- 这个就是下拉菜单选项 -->
<option value="black">--请选择颜色--</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
</select>
<select onchange="changeColor(this);">
<option style="background: black" value="black">--请选择--</option>
<option style="background: red" value="red">红色</option>
<option style="background: blue" value="blue">蓝色</option>
<option style="background: green" value="green">绿色</option>
</select>
<div class="c" style="background-color: red"onclick="changColor2(this);"></div>
<div class="c"style="background-color: blue"onclick="changColor2(this);"></div>
<div class="c"style="background-color: green"onclick="changColor2(this);"></div>
<br/><br/><br/><br/>
<div id="text">
<!-- div有自动换行的功能，但是要满足一行的格式才能换行，所以不满足是要用其他的标签进行封装一下才行；-->
校属各单位：
<p> 经学校研究决定，教职工9月2日开始上班（上下班交通车开通），学生9月4日报到注册，9月5日上课，作息时间及上下班交通车安排表附后。请各单位做好开学准备。</p>
特此通知。企业安全信用是企业的无形资产，食品安全既需要政府的强力监管，也需要食品企业经营者自觉承担社会责任，同时亦需要各方面逐步提高广大消费者对正确健康观念的认识。在企业的经营管理上把对食品的安全责任化为企业的自觉意识，强调健康是社会文明、进步和发展的基础。
</div>
</body>
</html>
select组件的更多相关文章
- 改变select组件的option选中状态的快捷方法
以前我都是在<option>标签处通过判断value是否与其中一个相同然后输出selected="selected"来处理的,今天发现可以直接能过Js改变<sel ...
- select组件2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 如何实现select组件的选择输入过滤作用
实现select组件的选择输入过滤作用的js代码如下: /** *其中//******之间的部分显示的是在没有选择输入过滤功能的代码上加入的功能代码 ** / (function ( $ ) { $. ...
- freemarker写select组件（一）
freemarker写select组件 1.宏定义 <#macro select id datas> <select id="${id}" name=" ...
- freemarker写select组件报错总结（一）
1.具体错误如下 六月 25, 2014 11:26:29 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template pr ...
- freemarker写select组件（五）
freemarker写select组件 1.宏定义 <#macro select id datas value="" key="" text=" ...
- freemarker写select组件（四）
freemarker写select组件 1.宏定义 <#macro select id datas value="" key="" text=" ...
- freemarker写select组件（三）
freemarker写select组件 1.宏定义 <#macro select id datas value="" key="" text=" ...
- freemarker写select组件（二）
freemarker写select组件 1.宏定义 <#macro select id datas value=""> <select id="${id ...
随机推荐
- 开源的文件比较工具：WinMerge,KDiff3,diffuse
为了寻找免费的BeyondCompare的替代品,最后经过实用,找到如下一些: 1.diffuse 感受:如果仅仅是比较两个文本类的文件,这个软件也就够用了. 安装好后,对着文件点击右键,会出现&qu ...
- BZOJ_1622_[Usaco2008_Open]_Word_Power_名字的能量_(字符匹配_暴力)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1622 给出多个文本串和模式串,求每个文本串中有多少模式串. 分析 直接暴力... #inclu ...
- cnb
<style type="text/css"> .fieldset_s{border: 1px #dedede solid;padding: 19px; color: ...
- LVS与其他负载均衡软件的区别
有人在邮件列表问haproxy的作者为何haproxy无论是tcp模式还是http模式,能支撑的并发量都不是太大. Willy回答了这个问题. Exactly. The difference is ...
- ZOJ3732 Graph Reconstruction Havel-Hakimi定理
分析: 给定一个非负整数序列{dn},若存在一个无向图使得图中各点的度与此序列一一对应,则称此序列可图化. 进一步,若图为简单图,则称此序列可简单图化 (来自百度百科) 可简单图化的判定可以用Have ...
- OpenGL立方体在世界坐标系中_缩放_旋转_平移_顶点片源着色器_光照作用_棋盘纹理贴图
读取bmp等图片格式中的像素还有难度,就先用这个棋盘图象素来弄了 代码打错一个就一直First-chance exception ,貌似还有一个要用q或者Q才能成功退出,不知道缺少哪句,我用窗口红叉退 ...
- bzoj 1877 [SDOI2009]晨跑（最小费用最大流）
Description Elaxia最近迷恋上了空手道,他为自己设定了一套健身计划,比如俯卧撑.仰卧起坐等 等,不过到目前为止,他坚持下来的只有晨跑. 现在给出一张学校附近的地图,这张地图中包含N个十 ...
- POJ 2251 Dungeon Master (BFS最短路)
三维空间里BFS最短路 #include <iostream> #include <cstdio> #include <cstring> #include < ...
- 【Java基础】继承中的代码块和构造方法的执行顺序探索
本文讲述有关一个类的静态代码块,构造代码块,构造方法的执行流程问题.首先来看一个例子 /** * Created by lili on 15/10/19. */ class Person{ stati ...
- EGit插件安装（附Eclipse版本对应表）
最近eclipse添加egit插件,通过网上的方法下载安装后不显示git选项.通过官网了解到egit的版本对应相应的eclipse版本. 如果你安装了最新版本,需要先卸载重启eclipse后重新安装兼 ...