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 ...
随机推荐
- Yii 实现restful
首先做一下接口的 URL 规划,假设我们要面对的资源是 item ,现在我们暴露5个接口供其他应用调用,分别是: 对于所有 item 列表调用: GET /rest/item 对于某个 item 信息 ...
- Understanding Item Import and Debugging Problems with Item Import (Doc ID 268968.1)
In this Document Purpose Details Scenario 1: Testing the basic item import with minimum columns po ...
- .NET程序内，访问私有或者保护成员的技巧
如果是C++,我们可以计算对象内成员的位置,然后偏移指针以访问类型的所有非公开成员.但是.NET对象完全受GC管理,地址根本无法得到,并且也无法通过指针调用方法. 当然... 这是一种很不值得推荐的技 ...
- C#创建Excel文件并将数据导出到Excel文件
工具原料: Windows 7,Visual Studio 2010, Microsoft Office 2007 创建解决方案 菜单>新建>项目>Windows窗体应用程序: 添加 ...
- WordPress FunCaptcha插件跨站脚本漏洞
漏洞名称: WordPress FunCaptcha插件跨站脚本漏洞 CNNVD编号: CNNVD-201311-431 发布时间: 2013-11-29 更新时间: 2013-11-29 危害等级: ...
- windows下的BT服务器搭建方案
BT下载可以说是目前网络上最流行的P2P文件共享方式了.BT服务器相比于FTP服务器有许多优势,其中最重要的一点就是BT服务器不受服务器带宽和连接到服务器用户数量的限制,能够提供高速的下载服务.今天, ...
- c# 无损高质量压缩图片代码
/// <summary> /// 无损压缩图片 /// </summary> /// <param name="sFile">原图片</ ...
- 从零开始学习jQuery (十) jQueryUI常用功能实战
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是实战篇. 使用jQueryUI完成制作网站 ...
- 在Eclipse中使用Github（EGit）
安装配置EGit 1. 安装Windows版的Git,登陆Github账号,登陆成功后会自动在本地和Github配置好密钥 2. 在Eclipse中安装EGit,地址http://download.e ...
- wpa_supplicant 和 802.11g WPA 认证的配置
# cd /etc/init.d# ln -s net.lo net.eth0 默认的接口名是 wlan0,让它开机时自动 up:cp /etc/init.d/net.lo /etc/init.d/n ...