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 ...
随机推荐
- leetcode面试准备:Triangle
leetcode面试准备:Triangle 1 题目 Given a triangle, find the minimum path sum from top to bottom. Each step ...
- Linux伙伴系统1
(一)--伙伴系统的概述 Linux内核内存管理的一项重要工作就是如何在频繁申请释放内存的情况下,避免碎片的产生.Linux采用伙伴系统解决外部碎片的问题,采用slab解决内部碎片的问题,在这里我们先 ...
- [POJ 1151] Atlantis
一样的题:HDU 1542 Atlantis Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 18148 Accepted ...
- [HDU 4549] M斐波那契数列
M斐波那契数列 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Total Sub ...
- js 获取服务器控件
大致是HtmlControl被服务器发送到页面ID不变,比如<div id="a" runat="sever"></div> WebCo ...
- 【转】简单几步让App Store软件下载快如迅雷 -- 不错！！！
原文网址:http://pad.zol.com.cn/237/2376160_all.html 下载速度慢的原因 1)国内用户从苹果软件商店下载软件速度很慢这是大家都知道的事实,究其原因就是苹 ...
- C#:实体类中做数据验证
主要是在实体类中验证 using System; namespace Jone.Function.attribute{ /// <summary> /// 附加 ...
- bugfree如何修改Bug7种解决方案的标注方法
Bug有7种解决方案的标注方法 By Design- 就是这么设计的,无效的Bug Duplicate - 这个问题别人已经发现了,重复的Bug External - 是个外部因素(比如浏览器.操作系 ...
- [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.2.2
Show that the following statements are equivalent: (1). $A$ is positive. (2). $A=B^*B$ for some $B$. ...
- NET中的引用类型和值类型 zt
.NET中的类型分为值类型和引用类型,他们在内存布局,分配,相等性,赋值,存储以及一些其他的特性上有很多不同,这些不同将会直接影响到我们应用程序 的效率.本文视图对.NET 基础类型中的值类型和引用类 ...