下拉菜单不与下部元素重叠

时间:2019-02-07 17:44:30

标签: javascript html css

我知道这是一个重复的问题。然而, 我已经花了几个小时弄乱CSS了,似乎无法正确解决这个问题。我的下拉菜单不会重叠,并且我认为我已经搞砸了很多,以至于我确实感到困惑。任何帮助将不胜感激!

**请注意,下拉菜单正在“替换”其他内容,并且没有像提到“ Z-index”的注释所建议的那样底层。

可能是由于使用display:Block和inline-block。

这是一个片段...

HTML

<!DOCTYPE html>
  <html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
 <body>
    <h3>Select times you will be in your office:</h3>

  <p class="daysOfTheWeek"><b><u>Monday</u></b></p>
  <div class="diffTimes">
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListMon1" onmousedown="if(this.options.length>8)   
                                {this.size=8;}" onchange='this.size=0;'
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListMon2" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;'
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListMon3" onmousedown="if(this.options.length>8)  
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListMon4" onmousedown="if(this.options.length>8)   
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListMon5" onmousedown="if(this.options.length>8)    
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListMon6" onmousedown="if(this.options.length>8
                                {this.size=8;}" onchange='this.size=0;'   
                                onblur="this.size=0;"></select>
  </div>

<p class="daysOfTheWeek"><b><u>Tuesday</u></b></p>
<div class="diffTimes">
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListTue1" onmousedown="if(this.options.length>8)     
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListTue2" onmousedown="if(this.options.length>8) 
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListTue3" onmousedown="if(this.options.length>8)   
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListTue4" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListTue5" onmousedown="if(this.options.length>8)   
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListTue6" onmousedown="if(this.options.length>8) 
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
</div>

<p class="daysOfTheWeek"><b><u>Wednesday</u></b></p>
<div class="diffTimes">
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListWed1" onmousedown="if(this.options.length>8)    
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListWed2" onmousedown="if(this.options.length>8)   
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListWed3" onmousedown="if(this.options.length>8) 
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListWed4" onmousedown="if(this.options.length>8)    
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;"></select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListWed5" onmousedown="if(this.options.length>8)    
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListWed6" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
</div>

<p class="daysOfTheWeek"><b><u>Thursday</u></b></p>
<div class="diffTimes">
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListThur1" onmousedown="if(this.options.length>8) 
                                 {this.size=8;}" onchange='this.size=0;' 
                                 onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListThur2" onmousedown="if(this.options.length>8) 
                                 {this.size=8;}" onchange='this.size=0;' 
                                 onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListThur3" onmousedown="if(this.options.length>8)
                                 {this.size=8;}" onchange='this.size=0;' 
                                 onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListThur4" onmousedown="if(this.options.length>8) 
                                 {this.size=8;}" onchange='this.size=0;' 
                                 onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListThur5" onmousedown="if(this.options.length>8)
                                 {this.size=8;}" onchange='this.size=0;' 
                                 onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListThur6" onmousedown="if(this.options.length>8)
                                 {this.size=8;}" onchange='this.size=0;' 
                                 onblur="this.size=0;">
      </select>
</div>

<p class="daysOfTheWeek"><b><u>Friday</u></b></p>
<div class="diffTimes">
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListFri1" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListFri2" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListFri3" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListFri4" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListFri5" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListFri6" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
</div>

<p class="daysOfTheWeek"><b><u>Saturday</u></b></p>
<div class="diffTimes">
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListSat1" onmousedown="if(this.options.length>8) 
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListSat2" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListSat3" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListSat4" onmousedown="if(this.options.length>8)  
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
    <p class="ey">&nbsp;&nbsp;&nbsp;From:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListSat5" onmousedown="if(this.options.length>8)
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;"></select>
    <p class="ey">&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;&nbsp;</p>
      <select id="TimeListSat6" onmousedown="if(this.options.length>8) 
                                {this.size=8;}" onchange='this.size=0;' 
                                onblur="this.size=0;">
      </select>
</div>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
<h3 class="review">Review Changes</h3>
      <br>
<input id="clickMe" type="button" value="Review Changes"   
       onclick="reviewFunc();"/>
<br>
<br>
<p><b><u>Monday</u></b></p>
<div class="reviewTimes">
    <p class="ey">From:&nbsp;&nbsp;</p>
    <p id="myText1" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;To:&nbsp;&nbsp;</p>
    <p id="myText2" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;From:&nbsp;&nbsp;</p>
    <p id="myText3" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;To:&nbsp;&nbsp;</p>
    <p id="myText4" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;From:&nbsp;&nbsp;</p>
    <p id="myText5" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;To:&nbsp;&nbsp;</p>
    <p id="myText6" class="ey" style="color:red"></p>
</div>

<p><b><u>Tuesday</u></b></p>
<div class="reviewTimes">
    <p class="ey">From:&nbsp;&nbsp;</p>
    <p id="myText21" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;To:&nbsp;&nbsp;</p>
    <p id="myText22" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;From:&nbsp;&nbsp;</p>
    <p id="myText23" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;To:&nbsp;&nbsp;</p>
    <p id="myText24" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;From:&nbsp;&nbsp;</p>
    <p id="myText25" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;To:&nbsp;&nbsp;</p>
    <p id="myText26" class="ey" style="color:red"></p>
</div>

<p><b><u>Wednesday</u></b></p>
<div class="reviewTimes">
    <p class="ey">From:&nbsp;&nbsp;</p>
    <p id="myText31" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;To:&nbsp;&nbsp;</p>
    <p id="myText32" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;From:&nbsp;&nbsp;</p>
    <p id="myText33" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;To:&nbsp;&nbsp;</p>
    <p id="myText34" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;From:&nbsp;&nbsp;</p>
    <p id="myText35" class="ey" style="color:red"></p>
    <p class="ey">&nbsp;&nbsp;To:&nbsp;&nbsp;</p>
    <p id="myText36" class="ey" style="color:red"></p>
</div>

</body>

<script src="editSchedule.js"></script>

</html>

JavaScript

//Array of Office hours

TIMES = ["Select", "OUT", "8:00A", "8:30A", "9:00A", "9:30A", "10:00A", "10:30A", 
             "11:00A", "11:30A", "12:00P", "12:30P", "1:00P", "1:30P", "2:00P",  
             "2:30P", "3:00P", "3:30P", "4:00P", "4:30P", "5:00P", "5:30P", "6:00P"];

// TODO : create loop to create objects to simplify code
// function main() {
//     // Adding TIMES array to dropdown DOM
//
//     var sel = document.getElementById('TimeListMon1');
//
//     for (var i = 0; i < TIMES.length; i++) {
//         var opt = document.createElement('option');
//         opt.innerHTML = TIMES[i];
//         opt.value = TIMES[i];
//         sel.appendChild(opt);
//     }
// }



//Function to pull selected values from dropdown menu for Days of week
function reviewFunc(){
    // Pull selected values for Monday
    var i = 1;
    while (i <= 6) {
        var dropDownValue = document.getElementById("TimeListMon" + i);
        var selected = dropDownValue.options[dropDownValue.selectedIndex].text;
        document.getElementById("myText" + i).innerHTML = selected;
        i++;
    }
    // Pull selected values for Tuesday
    i = 1;
    while (i <= 6){
        var dropDownValue = document.getElementById("TimeListTue" + i);
        var selected = dropDownValue.options[dropDownValue.selectedIndex].text;
        document.getElementById("myText2" + i).innerHTML = selected;
        i++;

    }
    //Pull selected values for Wednesday
    i = 1;
    while (i <= 6){
        var dropDownValue = document.getElementById("TimeListWed" + i);
        var selected = dropDownValue.options[dropDownValue.selectedIndex].text;
        document.getElementById("myText3" + i).innerHTML = selected;
        i++;

    }
}










// Adding TIMES array to dropdown DOM

var sel = document.getElementById('TimeListMon1');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListMon2');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListMon3');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListMon4');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListMon5');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}
var sel = document.getElementById('TimeListMon6');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListTue1');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListTue2');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListTue3');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}


var sel = document.getElementById('TimeListTue4');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListTue5');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListTue6');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}


var sel = document.getElementById('TimeListWed1');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListWed2');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListWed3');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListWed4');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListWed5');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListWed6');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}


var sel = document.getElementById('TimeListThur1');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListThur2');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListThur3');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListThur4');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListThur5');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListThur6');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListFri1');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListFri2');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListFri3');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListFri4');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListFri5');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListFri6');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}


var sel = document.getElementById('TimeListSat1');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListSat2');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListSat3');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListSat4');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}
var sel = document.getElementById('TimeListSat5');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

var sel = document.getElementById('TimeListSat6');
for (var i = 0; i < TIMES.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = TIMES[i];
    opt.value = TIMES[i];
    sel.appendChild(opt);
}

CSS

.ey
{
    display:inline-block;
}

p.spaceRed
{
    display:inline-block;
    color: red;
}
form{
    position: relative;
    display:inline-block;
}

div.diffTimes {
    display:block;

}
div.reviewTimes {
    display: inline-block;
}
p.daysOfTheWeek {
    text-decoration: underline;
    font-weight: bold;
    position:relative;
    overflow:hidden;

}

3 个答案:

答案 0 :(得分:1)

下拉菜单包含两个元素。该按钮以及包含项目的下拉菜单。单击该按钮将显示隐藏的下拉菜单。下拉列表的位置必须绝对不推挤其他元素。通常,要获得较短的DD,您只需更改DD的高度,但是由于无法通过样式设置,因此必须将整个select元素设为绝对。这意味着您的父相对元素必须具有固定的宽度。您会注意到它设置为200px。这是不理想的。假设您的DD大于200px?现在,您需要JS来动态设置父width属性。如果他们允许对DD进行样式化,则可以轻松避免所有这些情况。

字段:https://jsfiddle.net/gysxfz3e/4/

  1. 将选择内容包装在父元素中,以将相对定位应用于:

    <div class="parentSelect">
        <select id="TimeListMon2" onmousedown="if(this.options.length>8){this.size=8;}" onchange='this.size=0;' onblur="this.size=0;"></select>
    </div>
    
  2. 为您的父级创建CSS并选择元素:

    div.parentSelect{
      position: relative;
      width: 200px;
      display: inline-block;
      height: 15px;
    }
    
    div.parentSelect select{
      position: absolute;
    }
    

答案 1 :(得分:0)

在CSS中,您只需要在导航栏组件中执行z-index: 99;,即可解决重叠问题

答案 2 :(得分:0)

这里是一个示例,以后您可以迁移到移动设备。它仅显示了一些编码实践。

var doc, get, post, M, I, special, unspecial, createDropdown; // for use on other loads
addEventListener('load', function(){ // make sure DOM is loaded
doc = document;
get = function(url, success, context){
  var x = new XMLHttpRequest;
  var c = context || this;
  x.open('GET', url);
  x.onload = function(){
    if(success)success.call(c, JSON.parse(x.responseText));
  }
  x.send();
}
post = function(send, url, success, context){
  var x = new XMLHttpRequest;
  var c = context || this;
  x.open('POST', url); x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  x.onload = function(){
    if(success)success.call(c, JSON.parse(x.responseText));
  }
  if(typeof send === 'object' && send && !(send instanceof Array)){
    if(typeof FormData !== 'undefined' && send instanceof FormData){
      x.send(send);
    }
    else{
      var s, r = [];
      for(var p in send){
        s = send[p];
        if(typeof s === 'object')s = JSON.stringify(s);
        r.push(encodeURIComponent(p)+'='+encodeURIComponent(s));
      }
      x.send(r.join('&'));
    }
  }
  else{
    throw new Error('send argument must be an Object');
  }
  return x;
}
M = function(tag){
  return doc.createElement(tag);
}
I = function(id){
  return doc.getElementById(id);
}
special = function(str){ // for use with .innerHTML not .value or .text
  return str.replace(/&/g, '&amp;').replace(/'/g, '&apos;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
unspecial = function(str){
  return str.replace(/&amp;/g, '&').replace(/&apos;/g, "'").replace(/&quot;/g, '"').replace(/&lt;/g, '<').replace(/&gt;/g, '>');
}
createDropdown = function(selectId, dropdownArray, appendToElement, selectOnchangeFunc){
  var sel = M('select'); sel.id = selectId;
  for(var i=0,opt,l=dropdownArray.length; i<l; i++){
    opt = M('option'); opt.text = opt.value = dropdownArray[i]; sel.add(opt);
  }
  sel.onchange = selectOnchangeFunc; appendToElement.appendChild(sel);
}
var times = ['OUT', '8:00A', '8:30A', '9:00A', '9:30A', '10:00A', '10:30A', '11:00A', '11:30A', '12:00P', '12:30P', '1:00P', '1:30P', '2:00P', '2:30P', '3:00P', '3:30P', '4:00P', '4:30P', '5:00P', '5:30P', '6:00P'];
var selectIds = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'], weekday_times = I('weekday_times'), dropdownData = {}, output = I('output');
function selectChange(){
  dropdownData[this.id] = this.value; output.innerHTML = special(JSON.stringify(dropdownData));
}
for(var i=0,si,l=selectIds.length; i<l; i++){
  si = selectIds[i]; dropdownData[si] = 'OUT';
  createDropdown(si, times, weekday_times, selectChange);
}
output.innerHTML = special(JSON.stringify(dropdownData));
I('content').style.display = 'block';
});// end load
//]]>
*{
  padding:0; margin:0; box-sizing:border-box; overflow:hidden;
}
html,body{
  width:100%; height:100%; background:#aaa; color:#000;
}
body{
  position:relative; font:22px Tahoma, Geneva, sans-serif;
}
body>*{
  position:absolute;
}
#content{
  display:none; width:100%; height:100%; 
}
.page{
  position:relative; width:100%; height:100%; float:left;
}
.bar{
   width:100%; height:38px; padding:3px; background:#ccc; color:#000;
}
h1{
  font-size:28px; margin-left:3px;
}
.weekday{
  display:flex;
}
.weekday>*{
  flex:1; text-align:center; border:1px solid #000;
}
#overlap,#output{
  margin:10px;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div id='content'>
    <div class='page'>
      <div class='bar'><h1>Select times you will be in your office:</h1></div>
      <div class='main'>
        <div class='weekday'><label for='sun'>Sunday</label><label for='mon'>Monday</label><label for='tue'>Tuesday</label><label for='wed'>Wednesday</label><label for='thu'>Thursday</label><label for='fri'>Friday</label><label for='sat'>Saturday</label></div>
        <div class='weekday' id='weekday_times'></div>
        <div id='overlap'>dropdownData Looks Like:</div>
        <div id='output'></div>
      </div>
    </div>
  </div>
</body>
</html>

如果显示数据,则CSS会有所不同。您可以按照链接建议遍历dropdownData对象,将其分配给FormData,以便与XHR2一起使用。