2012-06-26 78 views
2

我有一些表單,這些表單在某些DIV中。 DIV是隱藏的,當您從選擇框中選擇一個選項時顯示。我需要一種方法來定位隱藏的DIV,因爲默認位置在前面提到的選擇框中。隱藏的DIV位置

+5

我們展示的演示,請...... –

回答

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> 
+0

這裏是預覽http://jsbin.com/eworah/edit#javascript,html,live – osyan

+0

非常感謝,但如何格式化表單,每個表單應該在同一個地方? –

+0

@ user1481792您可以提供全部或部分表單代碼嗎? – osyan

0

您可能需要使用Z-index來定位選擇框上方的元素。這將是很好看到一個演示第一,雖然

+0

以下是示例代碼:http://pastebin.com/TXexiiqF 我希望表單位於選擇框的右側,而不是位於其下方。對不起,如果這是一個新問題,但嘿,我是這個新手=) –

+0

我看不到CSS ..? – poepje

0

試試這個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> 
+0

雖然這可能在理論上回答這個問題,[這將是更可取的](http://meta.stackexchange.com/q/8259)在這裏包括答案的重要部分,並提供參考鏈接。 – ThiefMaster

+0

@TheifMaster ...也完成了代碼。 – khurram