Question

我有一些表格，在某些DIV中。 DIV是隐藏的，当您从选择框中选择一个选项时会显示。我需要一种方法来定位隐藏的DIV，因为默认位置在前面提到的选择框下。

Answer 1

<table> 
<tr>
<td>
<select id = "opts" onchange = "showForm()">
<option value = "0">Select Option</option>
<option value = "1">Option 1</option>
<option value = "2">Option 2</option>
</select>
</td>
<td>
<div id = "f1" style="display:none">
<form name= "form1">
Content of Form 1
</form>
</div>

<div id = "f2" style="display:none">
<form name= "form2">
Content of Form 2
</form>
</div>
</td>
</tr>
</table>

和

<script type = "text/javascript">
function showForm(){
var selopt = document.getElementById("opts").value;
if (selopt == 1) {
document.getElementById("f1").style.display="block";
document.getElementById("f2").style.display="none";
}
if (selopt == 2) {
document.getElementById("f2").style.display="block";
document.getElementById("f1").style.display="none";
}
}

</script>

Answer 2

您可能需要使用Z-index来定位选择框上方的元素。通过

首先看一个演示会很高兴

Answer 3

试试这个FIDDLE。它可能对你有帮助。
只需选择想法并与选择选项一起使用 这里是jquery：

$('#testDiv').mouseenter(function () {
        $('.hoveruserinfo').fadeIn();
    });
    $('#testDiv').mouseleave(function () {
        $('.hoveruserinfo').fadeOut();
    });

<强> CSS：

.hoveruserinfo
{
    background-color: #ccc;
    font-size: 11px;
    color: #333;
    border: 1px solid #ccc;
    font-weight: bold;
    border-radius: 4px;
    padding: 10px;
    margin-top: -2px;
}

<强> HTML

<div id="testDiv">  
Test
</div>
<div class="hoveruserinfo" style="position:absolute;width:206px;display:none;margin-left:147px;">
James Smith <span>this is my data</span>           
</div>

隐藏的DIV位置

3 个答案: