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

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

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

以下为详细代码

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

前一页:凹陷文字

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

相关阅读: CSS中的单位一览包括宽度尺寸单位颜色单位角度单位; 利用javascript高亮关键词系列; Dreamweaver错误：在onload运行_beforeSave.htm时，发生了一个JavaScript错误; 红色圣诞老人留言板模板; div+css中absolute标签与relative标签的巧妙运用; CSS中word-wrap属性同word-break属性的两者在中英文混排时的区别; 详细的百度蜘蛛爬行检测代码诠释; Javascript JS 限制复选框的选择个数

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

更多>>随机抽取信息: uni-app基础知识事件绑定@click与@tap点击事件区别; 武汉辉煌国际旅行社; asp利文本文档加FSO统计网站访问量的方法; 纯div+css制作的弹出菜单-02; asp之自动闭合HTML标签函数; 鼠标放在表格区域内，当前格的一整行和一整列变色

更多标签热门标签

关键字初级 optgroup 广告 email media adobe 比例改变创业系统生成 confirm 字符静态底部动画 rnd 替换右击 weatherxml 访问量操作 list 链接 cpu iis imprt 经典蜘蛛单选 form 计算 VBScript 表单绝对定位混合 max ctrl float CSS滤镜图片上传 pt 站长购物压缩管理留言板模版手效果