JS美化select运费

最新推荐文章于 2022-10-07 10:23:19 发布
置顶 最新推荐文章于 2022-10-07 10:23:19 发布
阅读量2.1k 收藏 2
点赞数
分类专栏： js 文章标签： function border table class input div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chinmo/article/details/2613076
版权

所用到图片：

代码如下：

<style type="text/css">

<!--

.selectBoxSelectedArea {

	FONT-SIZE: 12px; COLOR: #666666; PADDING-LEFT:14PX; LINE-HEIGHT: 18px; FONT-FAMILY: "宋体"; BACKGROUND-COLOR: #ffffff; PADDING-TOP:1PX

}

.selectBoxSelectedAreaFocus {

	FONT-SIZE: 12px; COLOR: #666666; PADDING-LEFT:14PX; HEIGHT: 15px; PADDING-TOP:3PX; FONT-FAMILY: "宋体"; BACKGROUND-COLOR: #ffffff

}

.selectBoxOption {

	FONT-SIZE: 12px; COLOR: #333333; PADDING-LEFT:15PX; HEIGHT: 15px; PADDING-TOP:2PX; FONT-FAMILY: "宋体"; BACKGROUND-COLOR: #ffffff

}

.selectBoxOptionOver {

	FONT-SIZE: 12px; COLOR: #333333; PADDING-LEFT:15PX; HEIGHT: 15px; PADDING-TOP:2PX; FONT-FAMILY: "宋体"; BACKGROUND-COLOR: #CCCCCC

}

.selectBoxOptionInnerLayer {

	BORDER: #CCCCCC 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #d3d3d3; OVERFLOW: auto; SCROLLBAR-SHADOW-COLOR: #d3d3d3; SCROLLBAR-3DLIGHT-COLOR: #CCCCCC; SCROLLBAR-ARROW-COLOR: #838383; SCROLLBAR-TRACK-COLOR: #eaeaea; SCROLLBAR-DARKSHADOW-COLOR: #CCCCCC

}

.box06 {

	BORDER: #CCCCCC 1px solid; FONT-SIZE: 13px; COLOR: red; FONT-FAMILY:宋体; HEIGHT: 18px; BACKGROUND-COLOR: #ffffff; width:100px;padding-top:2px; text-align:center;

}

-->

</style>

<script type="text/javascript">

var nowOpenedSelectBox = "";

var mousePosition = "";

function selectThisValue(thisId,thisIndex,thisValue,thisString) {

	var objId = thisId;

	var nowIndex = thisIndex;

	var valueString = thisString;

	var sourceObj = document.getElementById(objId);

	var nowSelectedValue = document.getElementById(objId+"SelectBoxOptionValue"+nowIndex).value;

	hideOptionLayer(objId);

	if (sourceObj) sourceObj.value = nowSelectedValue;

	settingValue(objId,valueString);

	selectBoxFocus(objId);

	if (sourceObj.onchange) sourceObj.onchange();

}



function settingValue(thisId,thisString) {

	var objId = thisId;

	var valueString = thisString;

	var selectedArea = document.getElementById(objId+"selectBoxSelectedValue");

	if (selectedArea) selectedArea.innerText = valueString;

}



function viewOptionLayer(thisId) {

	var objId = thisId;

	var optionLayer = document.getElementById(objId+"selectBoxOptionLayer");

	if (optionLayer) optionLayer.style.display = "";

	nowOpenedSelectBox = objId;

	setMousePosition("inBox");

}



function hideOptionLayer(thisId) {

	var objId = thisId;

	var optionLayer = document.getElementById(objId+"selectBoxOptionLayer");

	if (optionLayer) optionLayer.style.display = "none";

}



function setMousePosition(thisValue) {

	var positionValue = thisValue;

	mousePosition = positionValue;

}



function clickMouse() {

	if (mousePosition == "out") hideOptionLayer(nowOpenedSelectBox);

}



function selectBoxFocus(thisId) {

	var objId = thisId;

	var obj = document.getElementById(objId + "selectBoxSelectedValue");

	obj.className = "selectBoxSelectedAreaFocus";

	obj.focus();

}



function selectBoxBlur(thisId) {

	var objId = thisId;

	var obj = document.getElementById(objId + "selectBoxSelectedValue");

	obj.className = "selectBoxSelectedArea";

}



function makeSelectBox(thisId) {

	var downArrowSrc = "search-5.gif";	//坷弗率 拳混钎捞固瘤

	var downArrowSrcWidth = 16;	//坷弗率 拳混钎捞固瘤 width

	var optionHeight = 19; // option 窍唱狼 臭捞

	var optionMaxNum = 7; // 茄锅俊 焊咯瘤绰 option狼 肮荐

	var optionInnerLayerHeight = "";

	var objId = thisId;

	var obj = document.getElementById(objId);

	var selectBoxWidth = parseInt(obj.style.width);

	var selectBoxHeight = parseInt(obj.style.height);

	if (obj.options.length > optionMaxNum) optionInnerLayerHeight = "height:"+ (optionHeight * optionMaxNum) + "px";

	newSelect  = "<table id='" + objId + "selectBoxOptionLayer' cellpadding='0' cellspacing='0' border='0' style='position:absolute;z-index:100;display:none;' onMouseOver=/"viewOptionLayer('"+ objId + "')/" onMouseOut=/"setMousePosition('out')/">";

	newSelect += "	<tr>";

	newSelect += "		<td height='" + selectBoxHeight + "' style='cursor:hand;' onClick=/"hideOptionLayer('"+ objId + "')/"></td>";

	newSelect += "	</tr>";

	newSelect += "	<tr>";

	newSelect += "		<td height='1'></td>";

	newSelect += "	</tr>";

	newSelect += "	<tr>";

	newSelect += "		<td bgcolor='#D3D3D3'>";

	newSelect += "		<div class='selectBoxOptionInnerLayer' style='width:" + (selectBoxWidth-1) + "px;" + optionInnerLayerHeight + "'>";

	newSelect += "		<table cellpadding='0' cellspacing='0' border='0' width='100%' style='table-layout:fixed;word-break:break-all;'>";

	for (var i=0 ; i < obj.options.length ; i++) {

		var nowValue = obj.options[i].value;

		var nowText = obj.options[i].text;

		newSelect += "			<tr>";

		newSelect += "				<td height='" + optionHeight + "' class='selectBoxOption' onMouseOver=/"this.className='selectBoxOptionOver'/" onMouseOut=/"this.className='selectBoxOption'/" onClick=/"selectThisValue('"+ objId + "'," + i + ",'" + nowValue + "','" + nowText + "')/" style='cursor:hand;'>" + nowText + "</td>";

		newSelect += "				<input type='hidden' id='"+ objId + "SelectBoxOptionValue" + i + "' value='" + nowValue + "'>";

		newSelect += "			</tr>";

	}

	newSelect += "		</table>";

	newSelect += "		</div>";

	newSelect += "		</td>";

	newSelect += "	</tr>";

	newSelect += "</table>";



	newSelect += "<table cellpadding='0' cellspacing='1' border='0' bgcolor='#D3D3D3' onClick=/"viewOptionLayer('"+ objId + "')/" style='cursor:hand;'>";

	newSelect += "	<tr>";

	newSelect += "		<td style='padding-left:1px' bgcolor='#FFFFFF'>";

	newSelect += "		<table cellpadding='0' cellspacing='0' border='0'>";

	newSelect += "			<tr>";

	newSelect += "				<td><div id='" + objId + "selectBoxSelectedValue' class='selectBoxSelectedArea' style='width:" + (selectBoxWidth - downArrowSrcWidth - 4) + "px;height:" + (selectBoxHeight - 2) + "px;overflow:hidden;' onBlur=/"selectBoxBlur('" + objId + "')/"></div></td>";

	newSelect += "				<td><img src='" + downArrowSrc + "' width='" + downArrowSrcWidth + "' border='0'></td>";

	newSelect += "			</tr>";

	newSelect += "		</table>";

	newSelect += "		</td>";

	newSelect += "	</tr>";

	newSelect += "</table>";

	document.write(newSelect);

	

	var haveSelectedValue = false;

	for (var i=0 ; i < obj.options.length ; i++) {

		if (obj.options[i].selected == true) {

			haveSelectedValue = true;

			settingValue(objId,obj.options[i].text);

		}

	}

	if (!haveSelectedValue) settingValue(objId,obj.options[0].text);

}



function makeSelectBox1(thisId,value) {

	var downArrowSrc = "search-5.gif";	//坷弗率 拳混钎捞固瘤

	var downArrowSrcWidth = 16;	//坷弗率 拳混钎捞固瘤 width

	var optionHeight = 19; // option 窍唱狼 臭捞

	var optionMaxNum = 7; // 茄锅俊 焊咯瘤绰 option狼 肮荐

	var optionInnerLayerHeight = "";

	var objId = thisId;

	var obj = document.getElementById(objId);

	var selectBoxWidth = parseInt(obj.style.width);

	var selectBoxHeight = parseInt(obj.style.height);

	if (value.length > optionMaxNum) optionInnerLayerHeight = "height:"+ (optionHeight * optionMaxNum) + "px";

	newSelect  = "<table id='" + objId + "selectBoxOptionLayer' cellpadding='0' cellspacing='0' border='0' style='position:absolute;z-index:100;display:none;' onMouseOver=/"viewOptionLayer('"+ objId + "')/" onMouseOut=/"setMousePosition('out')/">";

	newSelect += "	<tr>";

	newSelect += "		<td height='" + selectBoxHeight + "' style='cursor:hand;' onClick=/"hideOptionLayer('"+ objId + "')/"></td>";

	newSelect += "	</tr>";

	newSelect += "	<tr>";

	newSelect += "		<td height='1'></td>";

	newSelect += "	</tr>";

	newSelect += "	<tr>";

	newSelect += "		<td bgcolor='#D3D3D3'>";

	newSelect += "		<div class='selectBoxOptionInnerLayer' style='width:" + (selectBoxWidth-1) + "px;" + optionInnerLayerHeight + "'>";

	newSelect += "		<table cellpadding='0' cellspacing='0' border='0' width='100%' style='table-layout:fixed;word-break:break-all;'>";

	

	for (var i=0 ; i < value.length ; i++) {

		var nowValue = value[i][0];

		var nowText = value[i][0];

		newSelect += "			<tr>";

		newSelect += "				<td height='" + optionHeight + "' class='selectBoxOption' onMouseOver=/"this.className='selectBoxOptionOver'/" onMouseOut=/"this.className='selectBoxOption'/" onClick=/"selectThisValue('"+ objId + "'," + i + ",'" + nowValue + "','" + nowText + "')/" style='cursor:hand;'>" + nowText + "</td>";

		newSelect += "				<input type='hidden' id='"+ objId + "SelectBoxOptionValue" + i + "' value='" + nowValue + "'>";

		newSelect += "			</tr>";

	}

	newSelect += "		</table>";

	newSelect += "		</div>";

	newSelect += "		</td>";

	newSelect += "	</tr>";

	newSelect += "</table>";



	newSelect += "<table cellpadding='0' cellspacing='1' border='0' bgcolor='#D3D3D3' onClick=/"viewOptionLayer('"+ objId + "')/" style='cursor:hand;'>";

	newSelect += "	<tr>";

	newSelect += "		<td style='padding-left:1px' bgcolor='#FFFFFF'>";

	newSelect += "		<table cellpadding='0' cellspacing='0' border='0'>";

	newSelect += "			<tr>";

	newSelect += "				<td><div id='" + objId + "selectBoxSelectedValue' class='selectBoxSelectedArea' style='width:" + (selectBoxWidth - downArrowSrcWidth - 4) + "px;height:" + (selectBoxHeight - 2) + "px;overflow:hidden;' onBlur=/"selectBoxBlur('" + objId + "')/"></div></td>";

	newSelect += "				<td><img src='" + downArrowSrc + "' width='" + downArrowSrcWidth + "' border='0'></td>";

	newSelect += "			</tr>";

	newSelect += "		</table>";

	newSelect += "		</td>";

	newSelect += "	</tr>";

	newSelect += "</table>";

	//document.write(newSelect);

	

	settingValue(objId,'请选择');

	return newSelect

}



document.onmousedown = clickMouse;

</script>



<script language="javascript">

var Array=[

					['北京市','7','3'],

                    ['上海市','7','4'],

                    ['天津市','7','5'],

                    ['重庆市','6','6'],

					['河北省','7','6'],

					['山西省','6','6']

                ];               

function $(o){return document.getElementById(o);}                

function showFirst(Value){

 var sel=$("select3");

 var div=$("aa");

for(var i=0;i<Array.length;i++){

var ary=Array[i];

        sel.options.add(new Option(ary[0],ary[0]));

  }

  $("newTxt").value="";

div.innerHTML=makeSelectBox1("select3",Array); 

var selectedArea = document.getElementById("select3selectBoxSelectedValue");

	if (selectedArea) selectedArea.innerText = "请选择";

return;

}



function showValue(Value){

    

    $("newTxt").value=Value;

}

function showValue1(Value){

var zl=$("zl");

var select1=$("select1");

var yj;

if(select1.value=="航空货运"){

yj=20;

}

else if(select1.value=="公路货运"){

yj=12;

}

 for(var i=0;i<Array.length;i++){

 var ary=Array[i];

        if(Value==ary[0]){

		if(select1.value=="航空货运"){

        $("newTxt").value=parseFloat(yj)+parseFloat(zl.value)*ary[1];

        }

		else if(select1.value=="公路货运"){

		$("newTxt").value=parseFloat(yj)+parseFloat(zl.value)*ary[2];

        }

		else if(select1.value=="其它方式"){

		$("newTxt").value="请与客服人员联系"

		}

		}

    }   

    

}

</script>

<table><tr>

<td><input id="zl" name="zl" value="" class="box06"></td>

<td>

<select onChange="showFirst(this.options[this.selectedIndex].value);" id=select1 style="width:96px; height:18px; display:none;">

<option value="">运送方式</option>

<option value="航空货运">航空货运</option>

<option value="公路货运">公路货运</option>

<option value="其它方式">其它方式</option>

</select>

<script>

	makeSelectBox("select1");

</script></td>

<td>

<select onChange="showValue1(this.options[this.selectedIndex].value);" id="select3" style="width:96px; height:18px;  display:none;">

<option value="" selected="selected">请选择</option>

</select><div id="aa">

<script>

	makeSelectBox("select3");

</script></div>

</td>

</tr></table>
一把编程的菜刀
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
Vue框架 MIinUI 配置
Amanda&Rachel的博客
04-25 576
Vue项目 首先下载必要的依赖 npm i -S 一、制作首页hadder和tabbar 完成Header区域，使用的的是mint-ui中的Header组件 制作底部的Tabbar区域，使用的是mui中的Tabbar.html 在制作购物车小图标的时候，先把扩展图标的css样式，拷贝到项目中 再拷贝我们的字体库ttf文件到项目中 为购物车小图标添加图像样式 要在中间区域放置一个router-view来展示路由匹配的组件 切换页面（改造tabbar为router-link）： 顶部的固定样式及返回按钮
用JavaScript来美化HTML的select标签的下拉列表效果
10-23
JavaScript在美化select标签的过程中主要扮演了以下几个角色： 1. 隐藏原始select元素：通过JavaScript，可以将原始的select标签隐藏起来，让其不可见。这是实现自定义下拉列表效果的前提，因为只有隐藏了原生的...
apicloud 运费计算js+页面
weixin_30852367的博客
08-05 285
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scal...
AngularJS尝鲜——快递运费计算
webbc的博客
04-06 1478
最近想多了解关于前端的内容，毕竟是全栈的时代了，不学一点就会落伍咯。先来尝尝AngularJS吧。直接上案例：快递运费计算，我会分别使用原生JS、JQuery、AngularJS来实现。原生js<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生JS，求快递运费</title> </head>
前端 - JavaScript 练习 - 根据路程计算运费
一只小网虫的博客
09-02 686
JavaScript 根据路程计算运费……
实验四：购物车页面的实现和美化
白山茶ι的博客
11-30 998
购物车页面的简单实现及其美化 html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>叮当图书网-查看购物车</title> <link rel="stylesheet" href="shopping.css"> <style ...
web课程设计网页规划与设计 基于html制作水果购物商城网站 (html+css+js+jquery)
最新发布
网页设计与制作
10-07 655
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
java26-36学习
weixin_46324965的博客
08-01 786
day26_xml文件解析 1.概念 xml:可扩展的标记语言，用来标记数据的 2.语法 <?xml version="1.0" encoding="UTF-8"?> 注意：声明的时候必须写在第一行 一个xml文档且有只有一个根标签 标签：起始和结束标签 3. XML约束 3.1 dtd约束 3.2 Schema约束 3.2 约束的好处 提示我们不要写错标签。会有相应的提示 4.Dom4J使用 1.新键一个lib文件夹 2.复制别人写好的dom4j-1.6.1.jar 到lib文件夹 3.右
基于Servlet&Jsp的网上书店设计(三)
tuke_tuke的博客
02-23 6546
六，本设计Servlet&Jsp代码实现过程 用一句话概括，用户在客户端请求jsp页面，jsp页面将结果提交到Servlet，由Servlet负责处理结果，访问数据库等操作，并将参数结果放在request，session，application等元素中，然后通过请求转发和重定向转发到其他jsp页面或者Servlet 6.1进入主页和查看书籍详细信息功能 客户通过客户端请求地址http://l
shop第一天
m0_51071144的博客
10-27 911
电商行业发展 近年来，中国的电子商务快速发展，交易额连创新高，电子商务在各领域的应用不断拓展和深化、相关服务业蓬勃发展、支撑体系不断健全完善、创新的动力和能力 不断增强。电子商务正在与实体经济深度融合，进入规模性发展阶段，对经济社会生活的影响不断增大，正成为我国经济发展的新引擎。 中国电子商务研究中心数据显示，截止到2012年底，中国电子商务市场交易规模达7.85万亿人民币，同比增长30.83%。其中，B2B电子商务交易额 达6.25万亿，同比增长27%。而2011年全年，中国电子商务市场交易额达6万亿人民
js+css实现select的美化效果
10-22
本文将详细介绍如何使用JavaScript（JS）和层叠样式表（CSS）来美化`<select>`元素，提升用户体验。 首先，我们要创建一个基本的CSS结构，以实现定制的下拉菜单样式。以下是一些关键的CSS类： 1. `.div-select`: ...
js自定义select下拉框美化特效
12-28
虽然其美化的插件很多，一搜一大把，但是需要引入长长的css文件和js文件实在是件头痛的事。其实select的实现原理很简单，就是一个点击 切换 显示和隐藏 并传值 的过程。用jquery模拟了，样式想怎么写就怎么写，且不...
js实现select选择框效果及美化
01-19
网上有各种各样的关于 select 选择框的美化，找了很多，并没有好的样式效果。所以就找了一个利用 ul li 做的类似 select 选择框的效果，不废话了，先上图，效果如下： 点击一个 test ，就会把列表显示出来，再次...
纯js超酷select下拉框美化插件
12-11
**纯JS超酷Select下拉框美化插件——TastySelect** 在网页设计中，Select下拉框作为数据选择的常见元素，其样式通常由浏览器默认控制，这往往不符合现代网页设计的美观需求。为了解决这个问题，开发者们创造了各种...
兼容FF，JS不间断循环滚动，包含自滚动，左右自滚动，点击左右滚动，鼠标暂停效果
热门推荐
chinmo的收藏
09-12 1万+
BODY leftMargin=0 topMargin=2 marginheight="0" marginwidth="0">CENTER>p>h1>JS不间断循环滚动h1>p>  TABLE style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #6666
layui 的表格table里设置多个复选框，如何实现全选等功能
chinmo的收藏
06-17 7656
layui 的表格table里设置多个复选框，如何实现全选等功能，如下图： 实现代码如下： 实现效果如下：
javascripot div登陆提示框(页面层不可用)
chinmo的收藏
04-20 5834
 html>head>meta http-equiv="Content-Type" content="text/html; charset=gb2312" />title>greencss.comtitle>script type="text/javascript">function sAlert(str,stitle){var msgw,msgh,bordercolor;msgw=300
js控制三列高度自适应DIV+CSS页面
chinmo的收藏
04-07 4704
 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">head>title
JavaScript实现select美化：简洁高效的方法
本文档主要探讨了如何使用JavaScript来实现select元素的美化，以便创建出更美观且符合用户体验的网页表单。以下是从提供的信息中提炼出的关键知识点： 1. **问题背景**：许多开发者在美化select标签时遇到困难，...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一把编程的菜刀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值