<!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. Markdown简单语法总结

    . 标题 # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 2. 列表 无序列表 * 西瓜 * 葡萄 * 香蕉 - 西瓜 - 葡萄 - ...

  2. Android开发UI之个性化控件之Menu

    MenuDrawer 滑出式菜单,通过拖动屏幕边缘滑出菜单,支持屏幕上下左右划出,支持当前View处于上下层,支持Windows边缘.ListView边缘.ViewPager变化划出菜单等. 项目地址 ...

  3. 如何修改word的项目编号

    在操作word文档时,有时会遇到word文档中的项目编号不是自己需要的,并造成word项目编号的混乱,如何word中的两级项目编号不统一,为解决会word的项目编号混乱问题,小编将教大家如何修改wor ...

  4. 结构体dict_index_t;

    /** InnoDB B-tree index */ typedef struct dict_index_struct dict_index_t; /** Data structure for an ...

  5. ☀【组件】数组 array

    <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  6. Get ListView items from other windows z

    This is more difficult than one might think. In order to get the information you're looking for, you ...

  7. IIS里面网站停止了，不能启动

    IIS里面网站文件夹显示红色的叉叉,停止了,不能启动,所有站点都停止了: 原来是Word wide web publish service 服务停止了,启动就好了

  8. HDU 1695 GCD 莫比乌斯反演

    分析:简单的莫比乌斯反演 f[i]为k=i时的答案数 然后就很简单了 #include<iostream> #include<algorithm> #include<se ...

  9. HDU 1285

    #include<stdio.h> #include<string.h> int degree[505],vis[505],map[501][501]; int main() ...

  10. 如何在编译Xcode-Plugin工程的时候增加Cocoapods依赖

    关于如何在编译Xcode-Plugin工程的时候增加Cocoapods依赖 以及在Mac App上使用Cocoapods的时候遇到Library not found for -lPods时的解决办法 ...