首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网络编程
JavaScript
正文
select发展史 超强第1/2页
所属分类：
网络编程
/
JavaScript
阅读数： 1219
收藏 0
赞 0
分享
作者：marvellous
本文旨在大家对select和模拟select有一个全面地了解,使此项技术能发挥出更高的水平。
最初的select的确很平淡,就是一个下拉选项列表:
<select> <center> <option>1 <option>2 <option>不是一样的嘛</select> <select name="select" onfocus="this.options[0].innerText='上海'"> <option value="上海">上海</option> <option value="北京">北京</option> <option value="香港">香港</option> </select>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
日久天长之后,人们对select要求高了,要修一修边幅:
<center> <form name="form1"> <select name="select01"> <option>11111 111111 111111111111</option> <option>2222222</option> <option>333333</option> <option>4444444</option> </select> <span style="position:relative;left:-23px;width:17px;height:17px;font:7px 'wingdings 3';color:#cc0000;background:cyan;border:2px outset;text-align:center;padding-top:3px;cursor:default" onclick="if(i>=document.form1.select01.options.length){i=0}document.form1.select01.options[i].selected=true;i++">q <iframe src="" style="position:absolute;top:0;left:0;z-index:-1; width:15px;height:15px;filter:alpha(opacity=0))" frameborder="0"></iframe> </span> </form> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
要加一些链接,变成菜单:
<STYLE> body { cursor: url(http://vip.6to23.com/candylau/image/xiucursor.cur)} </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> <form> <select size="1" name="D1" onchange=if(s=document.getElementById("S1")){s.style.backgroundColor=value}> <option selected value="white">请选择颜色</option> <option value="red">红色</option> <option value="blue">蓝色</option> <option value="green">绿色</option> </select> <textarea rows="20" name="S1" cols="35"></textarea> </form>
[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> </head> <body bgcolor="#83A5EB" background="http://moodboy.com/puterjam/blog/attachments/month_0408/oldr_cs1.JPG"> <table border="0" width="100%"> <tr> <td width="151" align="center"><font size="2">可编辑的Select</font></td> <td></td> </tr> <tr> <td width="151" align="center"><font size="2">长度可以随意修改 可以设置为只读</font></td> <td> </td> </tr> <tr> <td width="151" align="center"><font size="2">可以遮盖系统Select</font></td> <td> </td> </tr> <tr> <td width="151" align="right"> </td> <td><select><option>系统的Select</option></select> </td> </tr> </table> </body> </html>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
1
2
下一页
阅读全文
更多精彩内容
其他人还在看
深入解析Vue 组件命名那些事
本篇文章主要介绍了深入解析Vue 组件命名那些事，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
Vue学习笔记进阶篇之vue-cli安装及介绍
这篇文章主要介绍了Vue学习笔记进阶篇之vue-cli安装及介绍，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
评论 0
收藏 0
赞 0
分享
jquery版轮播图效果和extend扩展
这篇文章主要为大家详细介绍了jquery版轮播图效果，以及extend扩展的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
评论 0
收藏 0
赞 0
分享
jQuery Validate格式验证功能实例代码（包括重名验证）
本文通过实例代码给大家介绍了jQuery Validate格式验证功能，代码中包括重名验证的方法，需要的的朋友参考下吧
评论 0
收藏 0
赞 0
分享
Angular.js中angular-ui-router的简单实践
本篇文章主要介绍了Angular.js中angular-ui-router的简单实践，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
评论 0
收藏 0
赞 0
分享
JavaScript实现二维坐标点排序效果
这篇文章主要为大家详细介绍了JavaScript实现二维坐标点排序效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
评论 0
收藏 0
赞 0
分享
深入理解vue2.0路由如何配置问题
本篇文章主要介绍了vue2.0路由配置问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
基于bootstrap实现多个下拉框同时搜索功能
这篇文章主要为大家详细介绍了基于bootstrap实现多个下拉框同时搜索功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
评论 0
收藏 0
赞 0
分享
JavaScript 值类型和引用类型的初次研究(推荐)
这篇文章主要介绍了JavaScript 值类型和引用类型的初次研究,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
利用jQuery异步上传文件的插件用法详解
这篇文章主要介绍了利用jQuery异步上传文件的插件用法详解,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
揭秘朋友圈面膜：足不出户 国内生产俩月造出国际大牌
怎么用互联网思维的做餐饮？
主观臆断,百度联盟审核的条件
企业网站通过流量变现有哪些关键的环节需要注意？
Google AdSense 电汇教程 谷歌联盟国内电汇收款教程（招行）
淘宝评级规则详解
站长故事
更多
直击苹果发布会：苹果iWatch能否能撑起一个市场？
一个年入80W的96年草根站长
站长故事之一份月薪1200元的SEO推广工作
验证码广告：站长增加收入的另一种新渠道
我做私服网站的一些事情
大学生谈网络赚钱的经历
