JS美化select运费

所用到图片：

代码如下：

<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;//坷弗率 拳混钎捞固瘤 widthvar 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;//坷弗率 拳混钎捞固瘤 widthvar 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>