2

私はいくつかの DIV にあるいくつかのフォームを持っています。DIV は非表示で、選択ボックスからオプションを選択すると表示されます。デフォルトの位置は前述の選択ボックスの下にあるため、非表示の DIV を配置する方法が必要です。

4

3 に答える 3

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>
于 2012-06-26T08:20:30.063 に答える
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>
于 2012-06-26T08:23:45.217 に答える
0

選択ボックスの上に要素を配置するには、おそらく Z-index を使用する必要があります。最初にデモを見るのは良いことですが、

于 2012-06-26T07:43:20.497 に答える