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

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

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

以下为详细代码

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

前一页:凹陷文字

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

相关阅读: 深山行者留言系统V2.0 (简称留言板V2.0); 点击密码框弹出小键盘; asp计算器; 旅行社手机网站模板12; 四川省中国青年旅行社有限公司高新分社; 06 iis中Server Application Error问题如何修复; ASP与ACCESS数据库链接代码; 经典表格隔行变色程序

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

更多>>随机抽取信息: 可以用作后台的超级强的变色表格; 在图片未知尺寸情况下，利用CSS把图片垂直居中于div中心; div+css设置列表li超出部分显示省略号; 经典实用的触发型导航菜单; 利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器; 实现iis6与iis7环境下支持mp4视频随意拖动、预览播放、边下载边播放

更多标签热门标签

设置 js hover 增高上一页理想自适应墙文字样式杈规 选项右键失效思考程序 Session IE8 小旋风深山网站地图添加盖楼 visite 右击三级后台居中方法间隔 slectindext DOCTYPE 面板留言次数行号文件类型弹出模板规则 textarea 统计 png 万年历 select 鼠标信息爱墙梦幻 mop 简易参数深山旅游网站管理系统V1.0