<!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>&nbsp;&nbsp;&nbsp;&nbsp;经学校研究决定，教职工9月2日开始上班（上下班交通车开通），学生9月4日报到注册，9月5日上课，作息时间及上下班交通车安排表附后。请各单位做好开学准备。</p>
特此通知。企业安全信用是企业的无形资产，食品安全既需要政府的强力监管，也需要食品企业经营者自觉承担社会责任，同时亦需要各方面逐步提高广大消费者对正确健康观念的认识。在企业的经营管理上把对食品的安全责任化为企业的自觉意识，强调健康是社会文明、进步和发展的基础。
</div>
</body>
</html>

select组件的更多相关文章

  1. 改变select组件的option选中状态的快捷方法

    以前我都是在<option>标签处通过判断value是否与其中一个相同然后输出selected="selected"来处理的,今天发现可以直接能过Js改变<sel ...

  2. select组件2

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. 如何实现select组件的选择输入过滤作用

    实现select组件的选择输入过滤作用的js代码如下: /** *其中//******之间的部分显示的是在没有选择输入过滤功能的代码上加入的功能代码 ** / (function ( $ ) { $. ...

  4. freemarker写select组件（一）

    freemarker写select组件 1.宏定义 <#macro select id datas> <select id="${id}" name=" ...

  5. freemarker写select组件报错总结（一）

    1.具体错误如下 六月 25, 2014 11:26:29 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template pr ...

  6. freemarker写select组件（五）

    freemarker写select组件 1.宏定义 <#macro select id datas value="" key="" text=" ...

  7. freemarker写select组件（四）

    freemarker写select组件 1.宏定义 <#macro select id datas value="" key="" text=" ...

  8. freemarker写select组件（三）

    freemarker写select组件 1.宏定义 <#macro select id datas value="" key="" text=" ...

  9. freemarker写select组件（二）

    freemarker写select组件 1.宏定义 <#macro select id datas value=""> <select id="${id ...

随机推荐

  1. S3C2410 实验三——跑马灯实验

    http://www.evernote.com/shard/s307/sh/f2a748e7-34c4-4ce6-acac-82a756cc9e82/ad5813188d655e504857970db ...

  2. OTG

    OTG技术就是在没有Host的情况下,实现设备间的数据传送.例如数码相机直接连接到打印机上,通过OTG技术,连接两台设备间的USB口,将拍出的相片立即打印出来:也可以将数码照相机中的数据,通过OTG发 ...

  3. Github是什么？看完你就了解一些了

    要了解Github,我们首先要知道Git,Git是管理代码的工具,写代码不是件轻松的事儿,一个人写的时候已经不轻松了,一群人写就更不轻松了,但这世界上很多事都是怎么不轻松怎么来的,大部分人都会和别人一 ...

  4. [swustoj 764] 校门外的树 Plus Plus

    校门外的树 Plus Plus(0764) 问题描述 西南某科技大学的校门外长度为 L 的公路上有一排树,每两棵相邻的树之间的间隔都是 1 米.我们可以把马路看成一个数轴,马路的一端在数轴 1 的位置 ...

  5. 《C#并行编程高级教程》第4章 并发集合 笔记

    这一章主要介绍了System.Collections.Concurrent下的几个类. ConcurrentQueue<T> 并发队列.完全无锁,使用CAS(compare-and-swa ...

  6. ubuntu操作系统下载

    原文网址:http://www.cyberciti.biz/linux-news/download-ubuntu-14-4-cd-dvd-iso-images/ Download of the day ...

  7. Ubuntu 安装Chrome步骤

    一.添加PPA 从Google Linux Repository(http://www.google.com/linuxrepositories/)下载安装Key,或把下面的代码复制进终端,回车,需要 ...

  8. [liu yanling]规范软件测试流程

    测试计划 做任何事情都会有输入输出,对于测试过程我们可以把输入理解为测试计划.测试环境准备.测试工具的选择等等,输出可以理解为测试结果.测试用例设计即可以理解为以测试计划为输入的输出,也可以理解为以测 ...

  9. yarn队列提交spark任务权限控制

    转载请注明出处:http://www.cnblogs.com/xiaodf/ 1 CapacityScheduler 1.1 模型介绍 1.2 资源分配相关参数 1.3 限制应用程序数目相关参数 1. ...

  10. 【原】Comparator和Comparable的联系与区别

    1.知识点了解 Comparator和Comparable都是用用来实现集合中元素的比较.排序的,所以,经常在集合外定义Comparator接口的方法和集合内实现Comparable接口的方法中实现排 ...