高手请进，非常奇怪:一个DIV覆盖select box的问题(顶者有分)

代码2：Calendar.prototype.bindYear = function() {
  var cy = this.form.calendarYear;
  cy.length = 0;
  for (var i = this.beginYear; i <= this.endYear; i++){
    cy.options[cy.length] = new Option(i + Calendar.language["year"][this.lang], i);
  }
}Calendar.prototype.bindMonth = function() {
  var cm = this.form.calendarMonth;
  cm.length = 0;
  for (var i = 0; i < 12; i++){
    cm.options[cm.length] = new Option(Calendar.language["months"][this.lang][i], i);
  }
}Calendar.prototype.goPrevMonth = function(e){
  if (this.year == this.beginYear && this.month == 0){return;}
  this.month--;
  if (this.month == -1) {
    this.year--;
    this.month = 11;
  }
  this.date = new Date(this.year, this.month, 1);
  this.changeSelect();
  this.bindData();
}Calendar.prototype.goNextMonth = function(e){
  if (this.year == this.endYear && this.month == 11){return;}
  this.month++;
  if (this.month == 12) {
    this.year++;
    this.month = 0;
  }
  this.date = new Date(this.year, this.month, 1);
  this.changeSelect();
  this.bindData();
}Calendar.prototype.changeSelect = function() {
  var cy = this.form.calendarYear;
  var cm = this.form.calendarMonth;
  for (var i= 0; i < cy.length; i++){
    if (cy.options[i].value == this.date.getFullYear()){
      cy[i].selected = true;
      break;
    }
  }
  for (var i= 0; i < cm.length; i++){
    if (cm.options[i].value == this.date.getMonth()){
      cm[i].selected = true;
      break;
    }
  }
}Calendar.prototype.update = function (e){
  this.year  = e.form.calendarYear.options[e.form.calendarYear.selectedIndex].value;
  this.month = e.form.calendarMonth.options[e.form.calendarMonth.selectedIndex].value;
  this.date = new Date(this.year, this.month, 1);
  this.changeSelect();
  this.bindData();
}Calendar.prototype.bindData = function () {
  var calendar = this;
  var dateArray = this.getMonthViewArray(this.date.getYear(), this.date.getMonth());
  var tds = this.getElementById("calendarTable").getElementsByTagName("td");
  for(var i = 0; i < tds.length; i++) {
  //tds[i].style.color = calendar.colors["td_word_light"];
  tds[i].style.backgroundColor = calendar.colors["td_bg_out"];
    tds[i].onclick = function () {return;}
    tds[i].onmouseover = function () {return;}
    tds[i].onmouseout = function () {return;}
    if (i > dateArray.length - 1) break;
    tds[i].innerHTML = dateArray[i];
    if (dateArray[i] != "&nbsp;"){
      tds[i].onclick = function () {
        if (calendar.dateControl != null){
          calendar.dateControl.value = new Date(calendar.date.getFullYear(),
                                                calendar.date.getMonth(),
                                                this.innerHTML).format(calendar.dateFormatStyle);
        }
        calendar.hide();
      }
      tds[i].onmouseover = function () {
        this.style.backgroundColor = calendar.colors["td_bg_over"];
      }
      tds[i].onmouseout = function () {
        this.style.backgroundColor = calendar.colors["td_bg_out"];
      }
      if (new Date().format(calendar.dateFormatStyle) ==
          new Date(calendar.date.getFullYear(),
                   calendar.date.getMonth(),
                   dateArray[i]).format(calendar.dateFormatStyle)) {
        //tds[i].style.color = calendar.colors["cur_word"];
        tds[i].style.backgroundColor = calendar.colors["cur_bg"];
        tds[i].onmouseover = function () {
          this.style.backgroundColor = calendar.colors["td_bg_over"];
        }
        tds[i].onmouseout = function () {
          this.style.backgroundColor = calendar.colors["cur_bg"];
        }
      }//end if
    }
  }
}Calendar.prototype.getMonthViewArray = function (y, m) {
  var mvArray = [];
  var dayOfFirstDay = new Date(y, m, 1).getDay();
  var daysOfMonth = new Date(y, m + 1, 0).getDate();
  for (var i = 0; i < 42; i++) {
    mvArray[i] = "&nbsp;";
  }
  for (var i = 0; i < daysOfMonth; i++){
    mvArray[i + dayOfFirstDay] = i + 1;
  }
  return mvArray;
}Calendar.prototype.getElementById = function(id){
  if (typeof(id) != "string" || id == "") return null;
  if (document.getElementById) return document.getElementById(id);
  if (document.all) return document.all(id);
  try {return eval(id);} catch(e){ return null;}
}Calendar.prototype.getElementsByTagName = function(object, tagName){
  if (document.getElementsByTagName) return document.getElementsByTagName(tagName);
  if (document.all) return document.all.tags(tagName);
}Calendar.prototype.getAbsPoint = function (e){
  var x = e.offsetLeft;
  var y = e.offsetTop;
  while(e = e.offsetParent){
    x += e.offsetLeft;
    y += e.offsetTop;
  }
  return {"x": x, "y": y};
}Calendar.prototype.show = function (dateControl, popControl) {
  if (dateControl == null){
    throw new Error("arguments[0] is necessary")
  }
  this.dateControl = dateControl;
  if (dateControl.value.length > 0){
  this.date = new Date(dateControl.value.toDate());
  this.year = this.date.getFullYear();
  this.month = this.date.getMonth();
    this.changeSelect();
    this.bindData();
  }
  if (popControl == null){
    popControl = dateControl;
  }
  var xy = this.getAbsPoint(popControl);
  this.panel.style.left = xy.x + "px";
  this.panel.style.top = (xy.y + dateControl.offsetHeight) + "px";
  this.setDisplayStyle("select", "hidden");
  this.panel.style.visibility = "visible";
}Calendar.prototype.hide = function() {
  this.setDisplayStyle("select", "visible");
  this.panel.style.visibility = "hidden";
}
Calendar.prototype.setDisplayStyle = function(tagName, style) {
  var tags = this.getElementsByTagName(null, tagName)
  for(var i = 0; i < tags.length; i++) {
    if (tagName.toLowerCase() == "select" &&
       (tags[i].name == "calendarYear" ||
      tags[i].name == "calendarMonth")){
      continue;
    }
    tags[i].style.visibility = style;
  }
}//-->
</script>
</head>

解决方案 »

  1.   

    代码3：
    <body>
    <div id="calendarPanel" style="position: absolute;visibility: hidden;z-index: 9999;background-color: #FFFFFF;border: 1px solid #CCCCCC;width:175px;font-size:12px;">
    </div>
    <script language = "javascript">var calendar = new Calendar();
    </script>
    <center>  <table width="800" border="0" cellpadding="0" cellspacing="0">
        <!--DWLayoutTable-->
        <tr> 
          <td height="119" valign="top"> <form name="form1" method="post" action="">
              <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <!--DWLayoutTable-->
                <tr> 
                  <td width="259" height="21">&nbsp;</td>
                  <td colspan="4" valign="middle"> <input name="date" type="text" id="date1" onclick="new Calendar(null, null, 0).show(this)" /> 
                    <select name="select">
                      <option value="1" selected>1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
                      <option value="5">5</option>
                      <option value="6">6</option>
                      <option value="7">7</option>
                      <option value="8">8</option>
                      <option value="9">9</option>
                      <option value="10">10</option>
                      <option value="11">11</option>
                      <option value="12">12</option>
                    </select>
                    &#381;&#382;&#129;@ &#352;J&#381;n </td>
                  <td valign="middle"><input type="text" name="textfield" onClick="new Calendar(null, null, 0).show(this);"> 
                    <select name="select2">
                      <option value="1" selected>1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
                      <option value="5">5</option>
                      <option value="6">6</option>
                      <option value="7">7</option>
                      <option value="8">8</option>
                      <option value="9">9</option>
                      <option value="10">10</option>
                      <option value="11">11</option>
                      <option value="12">12</option>
                    </select>
                    &#381;&#382;&#129;@ &#381;&#352;</td>
                </tr>          
              </table>
            </form></td>
        </tr>
        <tr> 
          <td height="182" valign="top">
            <form name="form_ttt" method="post" action="">
              <table width="100%" border="0" cellpadding="0" cellspacing="0">
               
                <tr> 
                  <td height="21" colspan="2" align="right" valign="middle"><input type="submit" name="Submit3" value="&#381;&aelig;“&frac34;"></td>
                <td width="96">&nbsp;</td>
                  <td width="94">&nbsp;</td>
                  <td width="41">&nbsp;</td>
                  <td width="200">&nbsp;</td>
                  <td width="95">&nbsp;</td>
                  <td width="39">&nbsp;</td>
                </tr>
                <tr> 
                  <td width="131" height="26" align="right" valign="middle">&#710;ê&aelig;T&#129;F</td>
                  <td width="104"></td>
                  <td></td>
                  <td colspan="2" align="right" valign="middle">&#710;ê&aelig;T&#129;F</td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
                <tr> 
                  <td height="136"></td>
                  <td colspan="2" valign="top"> <select name="rireki_1" size="10" multiple style="width:200px">
                      <option value="2006081800">2006081800.csv</option>
                      <option value="2006081801">2006081801.csv</option>
                      <option value="2006081802">2006081802.csv</option>
                      <option value="2006081803">2006081803.csv</option>
                      <option value="2006081804">2006081804.csv</option>
                      <option value="2006081805">2006081805.csv</option>
                      <option value="2006081806">2006081806.csv</option>
                      <option value="2006081807">2006081807.csv</option>
                      <option value="2006081808">2006081808.csv</option>
                      <option value="2006081809">2006081809.csv</option>
                      <option value="2006081810">2006081810.csv</option>
                      <option value="2006081811">2006081811.csv</option>
                    </select> </td>

                  <td align="center" valign="middle"><input type="button" name="Button2" value="&#141;í&#143;&#339;"></td>
                  <td valign="middle">&nbsp; </td>
                  <td valign="top"><select name="rireki_2" size="10" multiple style="width:200px">
                      <option value="20060818010253">20060818010253.csv</option>
                      <option value="20060818030823">20060818030823.csv</option>
                      <option value="20060818050522">20060818050522.csv</option>
                      <option value="20060818051225">20060818051225.csv</option>
                      <option value="20060818062313">20060818062313.csv</option>
                      <option value="20060818081225">20060818081225.csv</option>
                      <option value="20060818082510">20060818082510.csv</option>
                      <option value="20060818103553">20060818103553.csv</option>
                      <option value="20060818124544">20060818124544.csv</option>
                      <option value="20060818153556">20060818153556.csv</option>
                      <option value="20060818182625">20060818182625.csv</option>
                      <option value="20060818232226">20060818232226.csv</option>
                    </select></td>
                  <td align="center" valign="middle"><input type="submit" name="Submit" value="&#141;í&#143;&#339;"></td>
                  <td></td>
                </tr>
              </table>
            </form></td>    <tr>
          <td height="26">&nbsp;</td>
      </table>
    </center>
    </body></html>
      

  2.   

    这个好像是kimsoft写的那个webCalendar
    隐藏select是因为select的显示级别比div高，不隐藏的话，日历的界面会被select覆盖.
      

  3.   

    可以看看http://www.9i5e.com/Company.aspx的例子
      

  4.   

    http://www.9i5e.com/Company.aspx
    ...............................
    一个购物网站...不会骗点击的吧？
      

  5.   


    能盖住Select的Div(不是用Iframe/Popup作载体)
    http://jkisjk.spaces.live.com/blog/cns!758CACE25E89DD3B!359.entry
      

  6.   

    现在的问题是
    div盖住select,我要把select显示出来啊
      

  7.   

    呵呵,这个DIV太猛了,不该他管的都给干掉了
      

  8.   

    是作者偷懒，没使用iFrame盖住select，而是把所有的select给隐藏了证据在这
    this.setDisplayStyle("select", "hidden");
      

  9.   

    mvAry[mvAry.length]  = '  <form name="calendarForm" style="margin: 0px;">';
    以上这句改成以下这句，再删掉这个方法Calendar.prototype.setDisplayStyle,以及调用这个方法的所有代码。
      mvAry[mvAry.length]  = '  <form name="calendarForm" style="margin: 0px;z-index:1;"><iframe  style="position:absolute;z-index:-1;width:200;height:245;top:0;left:0;scrolling:no;" frameborder="0" src="about:blank"></iframe>';
      

  10.   

    对，如leohuang(LEO所说去掉这行this.setDisplayStyle("select", "hidden");
    但这样，你的日历控件就挡在下面了
    Shift_JIS是啥编码，搞得全是乱码
      

  11.   

    你可以去研究一下jsf的日期标签，它的js脚本里有一个段函数专门处理DIV覆盖Select问题，其实原理很简单，就是把DIV下的select给隐藏了，然后当这个DIV消失的时候，再把select显示出来，我没有看你的代码，希望能给你一点提示！
      

  12.   

    lisonghua(天涯) 说的不错！我记得看过一篇文章，div不能遮挡select好像是IE的一个bug，其他浏览器没有这个问题
    解决办法有几种，最简单的就是定义两者之间的显示关系还有一种方法就是在div里面使用iframe作为载体
      

  13.   

    奇怪，发现都没人看这个跟贴：
     JK_10000(JK) ( ) 信誉：121    Blog  2006-8-25 17:59:57  得分: 0