select发展史超强

2016-02-19 10:43 3 1 收藏

下面图老师小编跟大家分享一个简单易学的select发展史超强教程，get新技能是需要行动的，喜欢的朋友赶紧收藏起来学习下吧！

【 tulaoshi.com - Web开发】

作者：marvellous
本文旨在大家对select和模拟select有一个全面地了解,使此项技术能发挥出更高的水平。
最初的select的确很平淡,就是一个下拉选项列表:
<style> select,option {background-color:lime} </style> <select> <p style="text-align:center"> <option>1 <option>2 <option>不是一样的嘛</select> <style> select,option {background-color:lime;font-family:华文行楷;color:red;} </style> <select name="select" onfocus="this.options[0].innerText='上海'"> <option value="上海">上海</option> <option value="北京">北京</option> <option value="香港">香港</option> </select>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
日久天长之后,人们对select要求高了,要修一修边幅:
<p style="text-align:center"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> .table1{background-color:white;FONT-FAMILY: Courier New, Courier;font-size:12px} .td_out{FONT-FAMILY: Courier New, Courier;font-size:12px;color:#000000;height:15px;border:1 solid #ffffff;} .td_over{FONT-FAMILY: Courier New, Courier;font-size:12px;cursor:default;background-color:#3366cc;border:1 solid #000000;color:#ffffff;height:15px} .slv{vertical-align:bottom;FONT-FAMILY: Courier New, Courier;font-size:12px;border-left-width:0;border-top-width:0;border-bottom-width:0;border-right:0 solid #000000;vertical-align:middle;height:18px;color:#000000;} .down{position:relative;left:-2px;font-size:11px;vertical-align:middle;width:16;height:16;color:#2050b0;background-color:#D0DFF7;border:1 solid #9fA3Ce;writing-mode:tb-rl;font-weight:bold; } .seldiv{ position:absolute;z-index:1000;overflow-x:hidden;border-left:1 solid #000000;border-bottom:1 solid #000000;border-right:1 solid #000000; SCROLLBAR-FACE-COLOR: #d0dff7; SCROLLBAR-HIGHLIGHT-COLOR: #d0dff7; SCROLLBAR-SHADOW-COLOR: #FFFFFF; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #d0dff7;} </style> </head> <body>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
要加一些链接,变成菜单:
<STYLE> body { cursor: url(http://vip.6to23.com/candylau/image/xiucursor.cur)} </STYLE> <style> .select{border: 0 inset buttonface; width: 100; font: icon; cursor: default;} .selected{border: 0 inset buttonface; background: window; padding: 0; font: icon;} .selectTable{height: 100%; width: 100%;border: 2 inset buttonhighlight; background: buttonface;} .option{font: icon; padding: 1; padding-left: 3; padding-right: 3; width: 100%;} .dropDown{position: absolute; visibility: hidden; width: 100%;border: 1 solid windowtext; padding: 0;background: window;} .select .button{width: 16px; height: 5; font-family: webdings; padding: 0;font-size: 11px; border: 2 outset buttonhighlight;} </style> <select onchange="if(this.options[this.selectedIndex].value!=''){location=this.options[this.selectedIndex].value;}" > <option value="http://www.163.com">网易</option> <option value="http://www.google.com">google</option> <option value="http://wwwsohu.com">搜狐</option> </select>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
<SELECT onchange="window.open(this.value,'','')"> <OPTION>产品快速导航</OPTION> <OPTION style="BACKGROUND: #999; COLOR: #fff" value=03product/pro2.jsp?cateID=1&CateId=1 selected>多媒体产品</OPTION> <OPTION value=http://www.tcl.com/03product/tv/chanpin-hid.htm> DLP数字光显背投</OPTION> <OPTION value=http://www.tclking.com> LCD液晶电视</OPTION> <OPTION value=http://www.tcl.com/03product/tv/chanpin-hid.htm> 数字高清背投</OPTION> <OPTION value=http://www.tcl.com/03product/tv/chanpin-pdp.htm> PDP等离子电视</OPTION> <OPTION value=http://www.tcl.com/03product/tv/chanpin-crt.htm> CRT高清彩电</OPTION> <OPTION value=03product/pro2.jsp?cateID=1&CateId=61> 酒店电视</OPTION> <OPTION value=03product/pro2.jsp?cateID=1&CateId=141> 乐华彩电</OPTION> <OPTION value=http://av.tcl.com/03products/List.asp?ListID=246> 视盘机</OPTION> <OPTION value=http://www.tcl.com/03product/mon/index.html> 监视器</OPTION> <OPTION value=http://www.tcl.com/03product/vw/index.html> 电视墙</OPTION> <OPTION style="BACKGROUND: #999; COLOR: #fff" value=03product/pro2.jsp?cateID=11&CateId=1>通讯产品</OPTION> <OPTION value=http://www.tclmobile.com.cn/mobile/product.jsp?catid=77> 手机</OPTION> <OPTION value=03product/pro2.jsp?cateID=11&CateId=18> 电话机</OPTION> <OPTION value=03product/pro2.jsp?cateID=11&CateId=19> 网络设备</OPTION> <OPTION value=03product/pro2.jsp?cateID=11&CateId=293> 宽带产品</OPTION> <OPTION style="BACKGROUND: #999; COLOR: #fff" value=03product/pro2.jsp?cateID=12&CateId=1>数码产品</OPTION> <OPTION value=http://www.tcl-digital.com/product/family.asp> 家用电脑</OPTION> <OPTION value=http://www.tcl-digital.com/product/business.asp> 商用电脑</OPTION> <OPTION value=http://www.tcl-digital.com/product/notebook.asp> 笔记本电脑</OPTION> <OPTION value=http://www.tcl-digital.com/product/digital.asp> DV产品</OPTION> <OPTION value=http://www.tcl-digital.com/product/digital.asp?Cateid=82> MP3播放器</OPTION> <OPTION value=http://www.go-video.com.cn/html/productshow.asp?sortid=25&sortid2=7> MP4播放器</OPTION> <OPTION style="BACKGROUND: #999; COLOR: #fff" value=03product/pro2.jsp?cateID=13&CateId=1>家电产品</OPTION> <OPTION value=03product/pro2.jsp?cateID=13&CateId=25> 电冰箱</OPTION> <OPTION value=03product/pro2.jsp?cateID=13&CateId=26> 洗衣机</OPTION> <OPTION value=http://www.tclac.com/tclaccn/product/product.aspx> 空调</OPTION> <OPTION value=http://www.tclac.com/tclaccn/product/productlist6.aspx> 中央空调</OPTION> <OPTION value=http://www.nanhaitcl.com/product/productlist1.aspx> 电饭煲</OPTION> <OPTION value=http://www.nanhaitcl.com/product/productlist2.aspx> 电磁炉</OPTION> <OPTION value=http://www.nanhaitcl.com/product/productlist3.aspx> 电风扇</OPTION> <OPTION value=http://www.nanhaitcl.com/product/productlist4.aspx> 饮水机</OPTION> <OPTION value=http://www.nanhaitcl.com/product/productlist5.aspx> 电暖器</OPTION> <OPTION value=http://www.nanhaitcl.com/product/productlist6.aspx> 净水器</OPTION> <OPTION value=http://www.nanhaitcl.com/product/productlist7.aspx> 烧烤炉</OPTION> <OPTION style="BACKGROUND: #999; COLOR: #fff" value=03product/pro2.jsp?cateID=14&CateId=1>电气产品</OPTION> <OPTION value=http://www.tcl-elc.com/main/gb/product/index.jsp> 开关插座</OPTION> <OPTION value=http://www.tcl-lighting.com/products.asp> 照明产品</OPTION> <OPTION value=http://www.tclelec.com/product/product_ljfl.htm> 工业电器</OPTION> <OPTION value=03product/pro2.jsp?cateID=14&CateId=161> 智能楼宇</OPTION> <OPTION style="BACKGROUND: #999; COLOR: #fff" value=03product/pro2.jsp?cateID=15&CateId=1>部品产品</OPTION> <OPTION value=http://www.asic.com.cn/cn/product.htm> 集成电路</OPTION> <OPTION value=http://www.tclrf.com/products/index.html> 高频头</OPTION> <OPTION value=http://www.tclbattery.com/china/product01.asp> 电池</OPTION> <OPTION style="BACKGROUND: #999; COLOR: #fff" value=03product/pro2.jsp?cateID=16&CateId=1>文化产品</OPTION> <OPTION value=http://www.meikamusic.com/> 美卡音像</OPTION> <OPTION value=http://www.tcl-disc.com/tp.htm> TCL光盘</OPTION></SELECT>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
后来发展到其文字内容可以增、删、编、改，即可以编辑：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>EditSelect</title> <style> .selecttext{ border:0px height: 16; font-family:arial; font-size:12px; } .selectbutton{ font-family:webdings; font-size:10px; height: 19; width: 16; border:1px solid #83A5EB; line-height:0px; padding-bottom:3px; background-color:#D1E0FD } .selecttable{ font-family:arial; font-size:12px; cursor:default; } .selectcontent { position: absolute; top:0; left:0; overflow:auto; border:1px solid #000000 } .selectdiv { position: absolute; width:100; overflow:hidden; } .select{ border-collapse: collapse; border:1px solid #7F9DB9 } </style> </head> <body bgcolor="#83A5EB" background="http://moodboy.com/puterjam/blog/attachments/month_0408/oldr_cs1.JPG"> 可编辑的Select 长度可以随意修改可以设置为只读可以遮盖系统Select 　 <select><option>系统的Select</option></select>　</body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
当前1/2页 12下一页

来源:https://www.tulaoshi.com/n/20160219/1595595.html

看过《select发展史超强》的人还看了以下文章更多>>

杨氏太极拳的发展史杨氏太极拳起源于哪里

标签：杨氏太极拳太极拳太极拳教程二十四式简化太极拳 42式太极拳陈氏太极拳

杨氏太极拳的发展史杨氏太极拳起源于哪里杨氏太极拳在我国流传已久，是太极拳里面一个很重要的分支，非常的值得练习，今天图老师图老师小编就来为大家详细的介绍一下杨氏太极拳的练习方法，发展历史，还有特点等等一系列全方位的知识。目录 1、杨氏太极拳的发展历史 2、杨氏太极拳起源于哪里 3、杨...

vba语句select case End Select

标签：电脑入门

一、Select Case语法及参数介绍 Select Case testexpression [Case expressionlist-n [statements-n]] ... [Case Else [elsestatements]] End Select Select Case 语句的语法具有以下几个部分： testexpression 必要参数。任何数值表达式或字符串表达式。 expressionlist-n 如果有 Case 出现，则为必要参数。其形式为 expression，exp...

善用 SELECT INTO 功能

标签： SQLServer

很多时候我们都需要覆制某 Table 的结构，而使用 SQL Server 的话当然可以找 Enterprise Manager 来解决这问题，但在操作上老是感到比较烦覆。其实我只需要一句 SQL 语言便能较易地覆制 Table 的结构，例如我们要覆制 Orders 到 OrderHistory 的语法如下： SELECT * INTO OrderHistory FROM Orders WHERE 0 = 1 由於 0 永远都不会等於 1 ...

JQuery SELECT单选模拟jQuery.select.js

标签： Web开发

基于jQuery JavaScript Library v1.3.2 的单选模拟 (本文件是跟据 zhangjingwei 的Jquery Select(单选) 模拟插件 V1.3.4 修改而来的) a. 修改的主要原因是，原来的zhangjingwei的模拟在显示方式上的问题。在跟文字交替出现时会出现错位。现将模拟DIV的display修改为inline方式。更自然的嵌入到文本行中。 b.在加载文件后自动转化样式名为'com...

Select的OnChange()事件

我们用Select的onchange事件时,常会遇到这样一个问题,那就是连续选相同一项时,不触发onchange事件.select的onchange事件就是这样子的.你得有Change(改变),才能触发该事件.... 掌握了它的特性后,相应的解决办法也很简单. <select name=sel onchange="bao(this.options[this.options.selectedIndex].value)" <option ...

查看更多精彩>>