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 ...
随机推荐
- 在Sublime Text 3中配置编译和运行Java程序
设置Java的PATH环境变量 在Java的jdk的bin目录下建立新文件runJava.bat 文件内容如下: @echo off cd %~dp1 echo Compiling %~nx1.... ...
- hadoop2.2编程：自定义hadoop map/reduce输入文件切割InputFormat
hadoop会对原始输入文件进行文件切割,然后把每个split传入mapper程序中进行处理,FileInputFormat是所有以文件作为数据源的InputFormat实现的基类,FileInput ...
- bzoj3262
三维裸的做法是一维排序,剩下树套树,可我好像还没写过树套树先说cdq分治吧,先对一维排序,相当于原来修改询问里的时间线在这上面分治.划分,计算前半部分对后半部分的影响,显然可以按第二维的顺序维护树状数 ...
- hadoop的wordcount例子运行
可以通过一个简单的例子来说明MapReduce到底是什么: 我们要统计一个大文件中的各个单词出现的次数.由于文件太大.我们把这个文件切分成如果小文件,然后安排多个人去统计.这个过程就是”Map”.然后 ...
- POJ_1064_Cable_master_(二分,假定一个解并判断是否可行)
描述 http://poj.org/problem?id=1064 有n条绳子,长度分别为l[i].如果从它们中切割出k条长度相同的绳子的话,这k条绳子每条最长能有多少? Cable master T ...
- apache和tomcat
Apache 和 Tomcat 都是web网络服务器,两者既有联系又有区别,在进行HTML.PHP.JSP.Perl等开发过程中,需要准确掌握其各自特点,选择最佳的服务器配置. Apache是web服 ...
- [转] POJ 题目分类
转载来自http://www.cnblogs.com/kuangbin/archive/2011/07/29/2120667.html 初期:一.基本算法: (1)枚举. (poj1753,p ...
- ruby编程语言-学习笔记2（第4章 表达式和操作符）
对属性和数组元素的赋值 o.m + = 1 ===>o.m = (o.m()+ 1) # 对 o.m()这个方法的结果+1 对数组元素的赋值也是通过 方法调用来完成. 0.[] = 1 == ...
- SQL Server查询性能优化——创建索引原则（一）
索引是什么?索引是提高查询性能的一个重要工具,索引就是把查询语句所需要的少量数据添加到索引分页中,这样访问数据时只要访问少数索引的分页 就可以.但是索引对于提高查询性能也不是万能的,也不是建立越多的索 ...
- 用java api读取HDFS文件
import java.io.IOException; import java.io.InputStream; import java.security.PrivilegedExceptionActi ...