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

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

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

以下为详细代码

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

前一页:凹陷文字

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

相关阅读: QQ强聊; 内蒙古香格里拉旅行社有限公司; 放大的分页代码; 利用fso判断文件是否存在; 大红袍形象设计暨旅游商品设计大赛在线投票评选; 利div+css做的柱状图，代码超级简洁; 用css做的英文首字母大写和英文全都大写通过各个浏览器; 东莞理工班徽网络在线投票

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; 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还有其它的吗

更多>>随机抽取信息: windows2003的IIS文件上传大小限制的解决方案; 旅行社网站模板默认风格13; ASP.NET中文乱码问题的解决。; asp采用access数据库搜索信息时因为日文片假名问题提示“Microsoft JET Database Engine 错误80040e14”的解决方法; 旅行社网站模板8; 利用CSS让网页里的提交按钮变得更漂亮

更多标签热门标签

在线 JavaScript实现文本框提示效果文化 imprt 适应链接样式经典营销验证码树型轮流 mop 破解文字垂直获得显示处理 126 背景色 adobe flush 理想 jpg 阴影效果客户端淘宝 Application blog 2003 设为首页技巧渐变自适应游览器 rss 经典的 optgroup Request option 汉字 window 增高 clear 考试多选状态栏屏幕比例数字 265