我知道这是一个重复的问题。然而， 我已经花了几个小时弄乱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"> From: </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"> To: </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"> From: </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"> To: </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"> From: </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"> To: </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"> From: </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"> To: </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"> From: </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"> To: </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"> From: </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"> To: </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"> From: </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"> To: </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"> From: </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"> To: </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"> From: </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"> To: </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"> From: </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"> To: </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"> From: </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"> To: </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"> From: </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"> To: </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"> From: </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"> To: </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"> From: </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"> To: </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"> From: </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"> To: </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"> From: </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"> To: </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"> From: </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"> To: </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"> From: </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"> To: </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: </p>
<p id="myText1" class="ey" style="color:red"></p>
<p class="ey"> To: </p>
<p id="myText2" class="ey" style="color:red"></p>
<p class="ey"> From: </p>
<p id="myText3" class="ey" style="color:red"></p>
<p class="ey"> To: </p>
<p id="myText4" class="ey" style="color:red"></p>
<p class="ey"> From: </p>
<p id="myText5" class="ey" style="color:red"></p>
<p class="ey"> To: </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: </p>
<p id="myText21" class="ey" style="color:red"></p>
<p class="ey"> To: </p>
<p id="myText22" class="ey" style="color:red"></p>
<p class="ey"> From: </p>
<p id="myText23" class="ey" style="color:red"></p>
<p class="ey"> To: </p>
<p id="myText24" class="ey" style="color:red"></p>
<p class="ey"> From: </p>
<p id="myText25" class="ey" style="color:red"></p>
<p class="ey"> To: </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: </p>
<p id="myText31" class="ey" style="color:red"></p>
<p class="ey"> To: </p>
<p id="myText32" class="ey" style="color:red"></p>
<p class="ey"> From: </p>
<p id="myText33" class="ey" style="color:red"></p>
<p class="ey"> To: </p>
<p id="myText34" class="ey" style="color:red"></p>
<p class="ey"> From: </p>
<p id="myText35" class="ey" style="color:red"></p>
<p class="ey"> To: </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;
}
答案 0 :(得分：1)
下拉菜单包含两个元素。该按钮以及包含项目的下拉菜单。单击该按钮将显示隐藏的下拉菜单。下拉列表的位置必须绝对不推挤其他元素。通常，要获得较短的DD，您只需更改DD的高度，但是由于无法通过样式设置，因此必须将整个select元素设为绝对。这意味着您的父相对元素必须具有固定的宽度。您会注意到它设置为200px。这是不理想的。假设您的DD大于200px？现在，您需要JS来动态设置父width属性。如果他们允许对DD进行样式化，则可以轻松避免所有这些情况。
字段：https://jsfiddle.net/gysxfz3e/4/
将选择内容包装在父元素中，以将相对定位应用于：
<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>
为您的父级创建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, '&').replace(/'/g, ''').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
}
unspecial = function(str){
return str.replace(/&/g, '&').replace(/'/g, "'").replace(/"/g, '"').replace(/</g, '<').replace(/>/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一起使用。