格式问题:下拉复选框
Formatting issue: DropDown of checkboxes
我一直在尝试创建一个包含4个元素的表单。一个是复选框的下拉框,另一个是简单的复选框。我试着把它们一个放在另一个下面。困难在于单击带有复选框的下拉列表时,另一个下拉列表会向下滑动。在使用复选框关闭下拉列表时,它们再次向上滑动。我试图将它们一个放在另一个下面,这样,如果单击带有复选框的下拉列表,另一个就会变得不可见,而不会向下滑动。当复选框的下拉列表关闭时,剩下的下拉列表只会显示出来。有人能帮我一下吗。我正试图模仿luxuryretresss.com 上的过滤器
下面是代码。
<html>
<head>
<script type="text/javascript">
function ExposeList1() {
var showstatus = document.getElementById('ScrollCountry').style.visibility;
if (showstatus == 'hidden') {
document.getElementById('ScrollCountry').style.visibility = "visible";
document.getElementById('Scrollguests').style.visibility = "hidden";
document.getElementById('Scrollminprice').style.visibility = "hidden";
document.getElementById('Scrollmaxprice').style.visibility = "hidden";
} else {
document.getElementById('ScrollCountry').style.visibility = 'hidden';
document.getElementById('Scrollguests').style.visibility = "visible";
document.getElementById('Scrollminprice').style.visibility = "visible";
document.getElementById('Scrollmaxprice').style.visibility = "visible";
}
}
</script>
</head>
<body>
<form action="trying.php" method="post">
<img src="original1.png" onmouseover="this.src='onhover1.png'"
onmouseout="this.src='original1.png'" onclick="ExposeList1()">
<div id="ScrollCountry"
style="height: 120; width: 150px; overflow: auto; border: 2px solid orange; visibility:hidden;border-radius:10px;">
<input type="checkbox" id="scb1" name="c1" value="Mexico">Mexico<br>
<input type="checkbox" id="scb2" name="c2" value="Belize">Belize<br>
<input type="checkbox" id="scb3" name="c3" value="Jamaica">Jamaica<br>
<input type="checkbox" id="scb4" name="c4" value="Thailand">Thailand<br>
<input type="checkbox" id="scb5" name="c5" value="Turks & Caicos">Turks & Caicos<br>
</div>
<br />
<div id = "Scrollguests">
<select>
<option id="n1" value="4">2 - 4</option>
<option id="n2" value="6">4 - 6</option>
<option id="n3" value="8">6 - 8</option>
<option id = "n4" value="10">8 - 10</option>
<option id = "n5" value="30">10+</option>
</select>
</div>
<br />
<div id = "Scrollminprice">
<select>
<option id="mn1" value="200">200</option>
<option id="mn2" value="300">300</option>
<option id="mn3" value="400">400</option>
<option id = "mn4" value="500">500</option>
<option id = "mn5" value="600">600</option>
</select>
</div>
<br />
<div id = "Scrollmaxprice">
<select >
<option id = "mx1" value="600">600</option>
<option id = "mx2" value="700">700</option>
<option id = "mx3" value="800">800</option>
<option id = "mx4" value="900">900</option>
<option id = "mx5" value="1000">1000</option>
</select>
</div>
<input type="submit" />
</form>
</body>
</html>
我把它改为使用display
而不是visibility
,因为它更有意义,效果更好。由于#ScrollCountry
现在位于复选框上方,因此不再需要隐藏它们。
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function ExposeList1() {
var showstatus=document.getElementById('ScrollCountry').style.display;
if (showstatus == 'none') {
document.getElementById('ScrollCountry').style.display="block";
} else {
document.getElementById('ScrollCountry').style.display='none';
}
}
</script>
<style>
fieldset{ border: 0; padding: 0; position: relative }
#ScrollCountry{
height: 120px;
width: 150px;
overflow: auto;
border: 2px solid orange;
display:none;
border-radius:10px;
position: absolute;
background: #fff;
}
</style>
</head>
<body>
<form action="trying.php" method="post">
<fieldset>
<img src="original1.png" onmouseover="this.src='onhover1.png'" onmouseout="this.src='original1.png'" onclick="ExposeList1();return false;">
<div id="ScrollCountry">
<input type="checkbox" id="scb1" name="c1" value="Mexico"><label for="scb1">Mexico</label><br>
<input type="checkbox" id="scb2" name="c2" value="Belize"><label for="scb2">Belize</label><br>
<input type="checkbox" id="scb3" name="c3" value="Jamaica"><label for="scb3">Jamaica</label><br>
<input type="checkbox" id="scb4" name="c4" value="Thailand"><label for="scb4">Thailand</label><br>
<input type="checkbox" id="scb5" name="c5" value="Turks & Caicos"><label for="scb5">Turks & Caicos</label><br>
</div>
<div id="Scrollguests">
<select>
<option id="n1" value="4">2 - 4</option>
<option id="n2" value="6">4 - 6</option>
<option id="n3" value="8">6 - 8</option>
<option id="n4" value="10">8 - 10</option>
<option id="n5" value="30">10+</option>
</select>
</div>
<div id="Scrollminprice">
<select>
<option id="mn1" value="200">200</option>
<option id="mn2" value="300">300</option>
<option id="mn3" value="400">400</option>
<option id="mn4" value="500">500</option>
<option id="mn5" value="600">600</option>
</select>
</div>
<div id="Scrollmaxprice">
<select >
<option id="mx1" value="600">600</option>
<option id="mx2" value="700">700</option>
<option id="mx3" value="800">800</option>
<option id="mx4" value="900">900</option>
<option id="mx5" value="1000">1000</option>
</select>
</div>
<input type="submit">
</fieldset>
</form>
</body>
</html>
您必须通过添加css代码将ScrollCountry块元素定位在正常的元素流之外:
position: absolute;
相关文章:
- 复选框问题
- webkit浏览器中的复选框问题
- AJAX 调用 PHP 复选框问题
- JavaScript 相互排斥的复选框问题
- Jquery复选框问题
- 某些动态生成的复选框问题的事件
- Angular:表单和复选框问题上的$setPristine
- Javascript复选框问题
- JavaScript (jQuery)禁用复选框问题
- 淘汰复选框问题
- Javascript无线电/复选框问题
- MDL复选框问题:不希望标签激活复选框
- IE中的复选框问题
- EXT JS网格SelModel复选框问题
- Gridview检查所有复选框问题
- PHP数组复选框问题,保留'right'提交后复选框
- Jquery每个或自定义复选框问题
- 选择所有复选框问题(jQuery)
- 流星模板和火焰的复选框问题
- Ext.NET中的复选框问题