<!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. Java之关键字static和final的使用

    static 在Java中声明属性.方法时,可使用关键字static来修饰. 1.static变量       按照是否静态的对类成员变量进行分类可分两种:一种是被static修饰的变量,叫静态变量或 ...

  2. Using innodb_large_prefix to avoid ERROR #1071,Specified key was too long; max key length is 1000 bytes

    Using innodb_large_prefix to avoid ERROR 1071        单列索引限制上面有提到单列索引限制767,起因是256×3-1.这个3是字符最大占用空间(ut ...

  3. C# winform 渐变效果

    在用到vs的兴奋过程中,想给程序做个启动画面,我采用了显示Aform,过一段时间,隐藏这个Aform,showdialog下一个Bform,closeAForm这个方法来做了,不知道大家有没有跟好的办 ...

  4. [译]PyUnit—Python单元测试框架(1)

    1. 原文及参考资料 原文链接:http://docs.python.org/2/library/unittest.html# 参考文档: http://pyunit.sourceforge.net/ ...

  5. LightOJ 1341 Aladdin and the Flying Carpet 数学

    题意:给个矩形的面积a,和矩形的最小边长b,问有多少种矩形的方案(不能是正方形) 分析:a可以写成x,y,因为不能是正方形,所以设x<y,那么x<sqrt(a),y>sqrt(a) ...

  6. （5）I2C总线的10bit地址以及通用广播地址

    其实,10bit地址我没用过,通用广播地址更没用过.通用广播地址应该是在多个mcu之间用i2c进行通信时使用的.虽说没用到,但还是做了翻译,说不定以后有机会用到: 10bit地址 10bit的寻址扩展 ...

  7. Storm系列(九)架构分析之Supervisor-同步Nimbus的事件线程

    Supervisor由三个线程组成,一个计时器线程和两个事件线程. 计时器线程负责维持心跳已经更新Zookeeper中的状态,还负责每隔一定的时间将事件线程需要执行的事件添加到其对应的队列中. 两个事 ...

  8. 【原创】MapReduce编程系列之表连接

    问题描述 需要连接的表如下:其中左边是child,右边是parent,我们要做的是找出grandchild和grandparent的对应关系,为此需要进行表的连接. Tom Lucy Tom Jim ...

  9. HW3.3

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  10. hdoj 2579 Dating with girls(2)【三重数组标记去重】

    Dating with girls(2) Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...