当前位置：移动技术网 > IT编程>开发语言>JavaScript > select发展史超强第1/2页

select发展史超强第1/2页

2019年07月30日 | 移动技术网IT编程 | 我要评论

作者：marvellous
本文旨在大家对select和模拟select有一个全面地了解,使此项技术能发挥出更高的水平。
最初的select的确很平淡,就是一个下拉选项列表:

日久天长之后,人们对select要求高了,要修一修边幅:

<center> 
<form name="form1"> 
  <select name="select01"> 
    <option>11111 111111 111111111111 
    <option>2222222 
    <option>333333 
    <option>4444444 
  </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 
 
</span> 
</form>

<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>

</body></html></center>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

要加一些链接,变成菜单:

<select onchange="if(this.options[this.selectedindex].value!=''){location=this.options[this.selectedindex].value;}"> 
<option value="http://www.163.com">网易 
<option value="http://www.google.com">google 
<option value="http://wwwsohu.com">搜狐 
</select>

<form> 
<select size="1" name="d1" onchange="if(s=document.getelementbyid("s1")){s.style.backgroundcolor=value}"> 
<option selected="" value="white">请选择颜色 
<option value="red">红色 
<option value="blue">蓝色 
<option value="green">绿色 
</select>

<//textarea>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

<select onchange="window.open(this.value,'','')"> <option>产品快速导航 <option style="background: #999; color: #fff" value="03product/pro2.jsp?cateid=1&cateid=1" selected="">多媒体产品 <option value="http://www.tcl.com/03product/tv/chanpin-hid.htm">  dlp数字光显背投 <option value="http://www.tclking.com">  lcd液晶电视 <option value="http://www.tcl.com/03product/tv/chanpin-hid.htm">  数字高清背投 <option value="http://www.tcl.com/03product/tv/chanpin-pdp.htm">  pdp等离子电视 <option value="http://www.tcl.com/03product/tv/chanpin-crt.htm">  crt高清彩电 <option value="03product/pro2.jsp?cateid=1&cateid=61">  酒店电视 <option value="03product/pro2.jsp?cateid=1&cateid=141">  乐华彩电 <option value="http://av.tcl.com/03products/list.asp?listid=246">  视盘机 <option value="http://www.tcl.com/03product/mon/">  监视器 <option value="http://www.tcl.com/03product/vw/">  电视墙 <option style="background: #999; color: #fff" value="03product/pro2.jsp?cateid=11&cateid=1">通讯产品 <option value="http://www.tclmobile.com.cn/mobile/product.jsp?catid=77">  手机 <option value="03product/pro2.jsp?cateid=11&cateid=18">  电话机 <option value="03product/pro2.jsp?cateid=11&cateid=19">  网络设备 <option value="03product/pro2.jsp?cateid=11&cateid=293">  宽带产品 <option style="background: #999; color: #fff" value="03product/pro2.jsp?cateid=12&cateid=1">数码产品 <option value="http://www.tcl-digital.com/product/family.asp">  家用电脑 <option value="http://www.tcl-digital.com/product/business.asp">  商用电脑 <option value="http://www.tcl-digital.com/product/notebook.asp">  笔记本电脑 <option value="http://www.tcl-digital.com/product/digital.asp">  dv产品 <option value="http://www.tcl-digital.com/product/digital.asp?cateid=82">  mp3播放器 <option value="http://www.go-video.com.cn/html/productshow.asp?sortid=25&sortid2=7">  mp4播放器 <option style="background: #999; color: #fff" value="03product/pro2.jsp?cateid=13&cateid=1">家电产品 <option value="03product/pro2.jsp?cateid=13&cateid=25">  电冰箱 <option value="03product/pro2.jsp?cateid=13&cateid=26">  洗衣机 <option value="http://www.tclac.com/tclaccn/product/product.aspx">  空调 <option value="http://www.tclac.com/tclaccn/product/productlist6.aspx">  中央空调 <option value="http://www.nanhaitcl.com/product/productlist1.aspx">  电饭煲 <option value="http://www.nanhaitcl.com/product/productlist2.aspx">  电磁炉 <option value="http://www.nanhaitcl.com/product/productlist3.aspx">  电风扇 <option value="http://www.nanhaitcl.com/product/productlist4.aspx">  饮水机 <option value="http://www.nanhaitcl.com/product/productlist5.aspx">  电暖器 <option value="http://www.nanhaitcl.com/product/productlist6.aspx">  净水器 <option value="http://www.nanhaitcl.com/product/productlist7.aspx">  烧烤炉 <option style="background: #999; color: #fff" value="03product/pro2.jsp?cateid=14&cateid=1">电气产品 <option value="http://www.tcl-elc.com/main/gb/product/index.jsp">  开关插座 <option value="http://www.tcl-lighting.com/products.asp">  照明产品 <option value="http://www.tclelec.com/product/product_ljfl.htm">  工业电器 <option value="03product/pro2.jsp?cateid=14&cateid=161">  智能楼宇 <option style="background: #999; color: #fff" value="03product/pro2.jsp?cateid=15&cateid=1">部品产品 <option value="http://www.asic.com.cn/cn/product.htm">  集成电路 <option value="http://www.tclrf.com/products/">  高频头 <option value="http://www.tclbattery.com/china/product01.asp">  电池 <option style="background: #999; color: #fff" value="03product/pro2.jsp?cateid=16&cateid=1">文化产品 <option value="http://www.meikamusic.com/">  美卡音像 <option value="http://www.tcl-disc.com/tp.htm">  tcl光盘</select>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

后来发展到其文字内容可以增、删、编、改，即可以编辑：

<html>

<head> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
<title>editselect</title>

.selectdiv 
{ 
position: absolute;  
width:100; 
overflow:hidden; 
} 
.select{ 
border-collapse: collapse; 
border:1px solid #7f9db9 
} 
</style> 
</head>

<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</select>　</td> 
 </tr> 
</table> 
</body>

</html>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

06.字典、集合和序列

1.字典练习练习题：字典基本操作字典内容如下:dic = {‘python’: 95,‘java’: 99,‘c... [阅读全文]
多线程爬取狗妈表情包

通过多线程爬取狗妈表情包import requestsimport jsonfrom jsonpath impo... [阅读全文]
Python：数据导出到Excel（使用xlwt）

写在前面：前端ajax调用导出方法，ajax无法导出问题原因：ajax是无法直接导出excel的，因为ajax的... [阅读全文]
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地

爬虫代码如下：运行需要本地开启mongo服务器端，安装有谷歌浏览器及selenium对应版本的驱动文件#codi... [阅读全文]
MongoDB基础操作

一、概述在MongoDB数据库里是存在有数据库的概念，但是没有模式（所有的信息都是按照文档保存的），保存数据的结... [阅读全文]
nodejs中mysql的用法

1、建立数据库连接：createConnection(Object)方法该方法接受一个对象作为参数，该对象有四个... [阅读全文]
Node.js 连接 MySQL

导言在我们学习后端（node）的过程中，要时常和数据库打交道，所以说我们打通node、MySQLJavaScri... [阅读全文]
Mysql trace命令介绍

trace作用：对SQL的跟踪，可以知道SQL是如何执行的，比EXPLAIN还要强大。注意点：开启trace工具... [阅读全文]
详解JavaScript作用域闭包

javascript闭包，是js开发工程师必须深入了解的知识。3月份自己曾撰写博客《javascript闭包》，博客中只是简单阐述了闭包的工作过程和列举了几个示... [阅读全文]
深入了解JavaScript词法作用域

javascript并不是传统的块级作用域，而是函数作用域！一、作用域 javascript引擎在代码执行前会对其进行编译，在这个过程中，像var a = 2... [阅读全文]

网友评论


验证码：

select发展史 超强第1/2页

2019年07月30日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论

select发展史超强第1/2页