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

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

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

以下为详细代码

<!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爱墙最新版--新的一年,新的界面,新的功能; python里面requests.post返回的res.text还有其它的吗; 126邮箱TAB效果(同一页面可多次使用); 06 iis中Server Application Error问题如何修复; asp中利用split,instr组合去除二维数组中重复项; 解决国内 github.com 打不开的准确方法

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

更多>>随机抽取信息: 14个CSS实用技巧精选推荐; asp利用sql操作数据表、数据库的一些方法; 发布重大事件说明; 景点门票预订商建站解决方案; 强制转载文章者加上你的文章出处; asp中Request.ServerVariables能获取的信息整理总结

更多标签热门标签

窗口深山v1.0旅行社网站管理系统颜色小旋风 FSO 行号文本框 txt vb 黑白 flash 记录 access 竖排格式下拉 document 访问量 openwin 选项心情 border 简易高度滚动 body 边框 iis 关联控件 function 保护眼睛的电脑色 text 居中网页网站利用position把div放在flash上关闭相册 css instr 网易压缩框架跳转许愿采集表单 DIV+CSS做的透明菜单兼容IE、FF等 letter-spacing