用javascript美化Select,并获取相应的值 -- [表单特效]─ 深山工作室提供网络投票系统|微信公众号投票|微信公众号小程序|抖音小程序|百度小程序|微信公众号开发|企业网站建设

用javascript美化Select,并获取相应的值

网络 2009/1/20 21:02:16 深山行者字体:大中小浏览 9246

以下为详细代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML lang=zh-CN xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>用javascript美化Select,并获取相应的值</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META http-equiv=Content-Language content=zh-CN>
<STYLE type=text/css>* {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
BODY {
	MARGIN: 50px
}
.iDiv {
	BORDER-RIGHT: #aaa 1px solid; BORDER-TOP: #aaa 1px solid; FONT-SIZE: 12px; BACKGROUND: url(images/select_bg.gif) no-repeat 100% 0px; VERTICAL-ALIGN: middle; BORDER-LEFT: #aaa 1px solid; CURSOR: default; COLOR: #333; TEXT-INDENT: 4px; LINE-HEIGHT: 20px; BORDER-BOTTOM: #aaa 1px solid; POSITION: absolute; HEIGHT: 20px
}
.iDiv_over {
	BACKGROUND-POSITION: 100% 100%; COLOR: #f96
}
.iDiv_out {
	BACKGROUND-POSITION: 100% 0px; COLOR: #333
}
.cDiv {
	BORDER-RIGHT: silver 1px solid; BORDER-TOP: silver 1px solid; Z-INDEX: 1; BACKGROUND: #f7f7f7; OVERFLOW: auto; BORDER-LEFT: silver 1px solid; CURSOR: default; BORDER-BOTTOM: silver 1px solid; POSITION: absolute; moz-user-select: none
}
.cDiv UL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; listStyle: none
}
.cDiv UL LI {
	TEXT-INDENT: 4px; LINE-HEIGHT: 20px; HEIGHT: 20px
}
</STYLE>

<SCRIPT>
function $() {
	return document.getElementById(arguments[0]);
}

//取得外部class的属性值

function getCurrentStyle(o) {
	return o.currentStyle||document.defaultView.getComputedStyle(o,null);
}

window.onload = function() {
	SetAllSelects.setAllSelectStyle();
}
</SCRIPT>

<META content="MSHTML 6.00.5730.13" name=GENERATOR></HEAD>
<BODY>
<FORM><SELECT> <OPTION selected>这一只不需要美化</OPTION> <OPTION>选择1_1</OPTION> 
  <OPTION>选择1_2</OPTION></SELECT> &nbsp; <SELECT class=select> <OPTION 
  selected>要美化的就加class</OPTION> <OPTION>选择2_1</OPTION> 
  <OPTION>选择2_22_22_22_2</OPTION> <OPTION>选择2_22_22_22_3</OPTION></SELECT> 
<BR><BR><BR><SELECT class=select> <OPTION value=3_1 
  selected>拿这一只来证明取值和取文字都没有问题</OPTION> <OPTION value=3_2>选择3_22_22_22_2</OPTION> 
  <OPTION value=3_3>选择3_22_22_22_3</OPTION> <OPTION 
  value=3_4>选择3_22_22_22_4</OPTION> <OPTION value=3_5>选择3_22_22_22_5</OPTION> 
  <OPTION value=3_6>选择3_22_22_22_6</OPTION> <OPTION 
  value=3_7>选择3_22_22_22_7</OPTION> <OPTION value=3_8>选择3_22_22_22_8</OPTION> 
  <OPTION value=3_9>选择3_22_22_22_9</OPTION> <OPTION 
  value=3_10>选择3_22_22_22_10</OPTION> <OPTION 
  value=3_11>选择3_22_22_22_11</OPTION> <OPTION 
  value=3_12>选择3_22_22_22_12</OPTION> <OPTION 
  value=3_13>选择3_22_22_22_13</OPTION> <OPTION 
  value=3_14>选择3_22_22_22_14</OPTION> <OPTION 
  value=3_15>选择3_22_22_22_15</OPTION> <OPTION 
value=3_16>选择3_22_22_22_16</OPTION></SELECT> </FORM>
<SCRIPT>
function getValue() {
	var kk = document.getElementsByTagName('select')[2];
	return kk.options[kk.selectedIndex].value;
}
function getTxt() {
	var kk = document.getElementsByTagName('select')[2];
	return kk.options[kk.selectedIndex].innerHTML;
}
</SCRIPT>
<BR><BR>
<A onclick=alert(getValue()); href="#;">取第三个的值</A> 
<A onclick=alert(getTxt()); href="#;">取第三个的文本</A> 
</BODY></HTML>

前一页:凹陷文字

后一页:静态页面在文本框中输入数字，表格直接算出相应的结果

相关阅读: 网易评论的盖楼样式; 中国青岛春秋国际旅行社有限公司; 如何彻底卸载电脑里你不想用的软件; IIS上传文件大小解处限制的方法; 相册列表显示模式; 江油旅游; innerHTML支持firefox火狐; 用javscript实现为表格的每一行自动加上序号

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; uni-app; asp函数库; ASP; DIV+CSS; HTML; python

更多>>同类信息: input文本输入框只能输入数字或字母或汉字等; 用于深山在线投票的一个javascript统计checkbox现在选中的个数一边点复选框一边验证并计算现在选了多少个复选框; 利用javascript简短功能就可以检查form表单中的元素是否已经填写; javascript日期验证比较; javascript 根据汉字拼音首字母快速定位下拉列表; javascript取汉字拼音首字母缩写程序

更多>>最新添加文章: dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT; Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素; 抖音直播音挂载小雪花懂车帝小程序; javascript获取浏览器指纹可以用来做投票; 火狐Mozilla Firefox出现：无法载入您的Firefox配置文件它可能已经丢失或是无法访问问题解决集合处理办法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路径; python通过代码修改pip下载源让下载库飞起; python里面requests.post返回的res.text还有其它的吗

更多>>随机抽取信息: 在网页添加创建快捷方式的按钮; Shopify 店铺被封原因与防范及如何解封办法; 一个不错的分页效果; javascript正则的用法与示例; DIV+CSS分页代码,放大镜分页效果; jquery获得当前所有input表单数据并进行序列化的各种问题与解决方案serialize与serializeArray的区别分析

更多标签热门标签

loading 遍历导航游戏网页制作 link onmouserout 收缩奋斗青春收藏 form 凹陷 web 文件大小窗口深山v1.0旅行社网站管理系统创建 ajax 颜色小旋风留言绝对定位 FSO 行号参数提示文本框 txt tab 静态 vb 黑白宽二级 flash 记录 onblur 版权声明 access 竖排 display FTP 格式下拉列 div的高度 document 访问量设置