所用到图片:
代码如下:
<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>