一个关于JS美化select的问题请高手解答

本人引用了一个select美化的程序，但是有部分功能实现不了，请高手指点，以下是美化的代码：---------------------------------------------------------------------------
/************************************************
**** Select Box Design Script *******************
************************************************/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 = "../images/skin/index/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);
}document.onmousedown = clickMouse;
---------------------------------------------------------------------------在页面中的调用为：
---------------------------------------------------------------------------
<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 zl=$("zl");
 sel.options.length=1;
for(var i=0;i<Array.length;i++){
 var ary=Array[i];
        sel.options.add(new Option(ary[0],ary[0]));
    }
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>
<select onChange="showFirst(this.options[this.selectedIndex].value);" name=carry style="width:96px; height:18px; display:none;" id="select1">
<option value="">运送方式</option>
<%
  tmpdim=cls.data_array("data.shop_carry")
  if isarray(tmpdim) then
    for d=1 to ubound(tmpdim,1)
      tmpcheck=""
      if d=1 then tmpcheck=" checked"
      tmpprice=tmpdim(d,1)
      if tmpprice=0 then
        tmpprice="免费"
      else
        tmpprice="加"&tmpdim(d,1)&cls.web_unit("coin")
      end if
%>
<option value="<%=tmpdim(d,0)%>"><%=tmpdim(d,0)%></option>
<%
    next
    erase tmpdim
  end if
%>
  </select>
  <script>
makeSelectBox("select1");
if("" != ""){
selectValue6('select1', document.form.req_vehi, "");
}
</script></td><td>&nbsp;</td>
<td>
    <select onChange="showValue1(this.options[this.selectedIndex].value);" id="select3" style="display:none">
<option style="text-align:center">请选择</option>
</select>
<script>
makeSelectBox("select3");
if("" != ""){
selectValue6('select3', document.form.req_vehi, "");
}
</script>
---------------------------------------------------------------------------------------

解决方案 »

  1.   

    此回复为自动发出,仅用于显示而已，并无任何其他特殊作用
    楼主【jackygaipeng】截止到2008-07-04 12:21:11的历史汇总数据(不包括此帖)：
    发帖的总数量:5                        发帖的总分数:260                      
    结贴的总数量:5                        结贴的总分数:260                      
    无满意结贴数:0                        无满意结贴分:0                        
    未结的帖子数:0                        未结的总分数:0                        
    结贴的百分比:100.00%               结分的百分比:100.00%                  
    无满意结贴率:0.00  %               无满意结分率:0.00  %                  
    敬礼!
      

  2.   

    以上是应该出现的效果，但是第二个省份的select无内容，如果不用美化就有内容，高手指点一下是为什么？
      

  3.   

    http://116.76.201.99/1.rar 打好的包，请指点！
      

  4.   

    呵呵，在你美化的基础上我已经完全弄出来了首先以下代码加上红色部分
    <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>
    然后以下函数加上红色部分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]));
      }
    div.innerHTML=makeSelectBox1("select3",Array); 
    return;
    }
    呵呵，最后就是添加一个函数makeSelectBox1function 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);

    var haveSelectedValue = false;
    for (var i=0 ; i < value.length ; i++) {
    if (value.selected == true) {
    haveSelectedValue = true;
    settingValue(objId,value[i][0]);
    }
    }
    if (!haveSelectedValue) settingValue(objId,value[0][0]);
    return newSelect
    }然后就成功了