2

私はColdFusion5でプログラミングしており、selectステートメントのonchange呼び出しに基づいてコードのdivブロックを表示/非表示にしようとしています。オンラインで同様の問題を見つけましたが、style.displayまたはvisibilityを使用することができませんでした。このコードを使用すると、js関数に入ることができ、最初のアラートがselect選択の値を起動し、ifステートメント内に2番目のアラートが表示されます。divを非表示/表示するラインに到達すると、ドロップアウトします。何か案は？

ColdFusionコード（注：このコードはiframe内にあります）：

<select name="select_Attendee_2" required="yes" onchange="parent.showHideGuestForm();">
        ...stuff...
    </select>
    <div id="GuestLayer1">
        ...more stuff...
    </div>

Javascript（外部ファイル内）：

function showHideGuestForm()
{
    var iFrame = $($('#my_iframe').contents());
    alert(window.my_iframe.document.formAttendees.elements['select_Attendee_2'].value);

    if ((trim(window.my_iframe.document.formAttendees.elements['select_Attendee_2'].value)) == '')
        {
            alert("before none");
            window.my_iframe.document.formAttendees.getElementById('GuestLayer1').style.display = 'hidden';
            alert("after none");
        }
        else
        {
            alert("before block");
            window.my_iframe.document.formAttendees.getElementById('GuestLayer1').style.display = 'block';
            alert("after block");
        }
}
4

4 に答える 4

1

これは私を悩ませていたので、htmlファイルで試してみました。これはColdFusionとは何の関係もありません。これがiframe内のページの関連部分です。

<p id="p2">This is page 2.</p>
<form id="myForm" action="Page2.html" method="post">
    <div id="div1">
        <p>This is in the div.</p>
    </div>

</form>

これは、javascriptを含む親ページの関連部分です。

<p id="p1">hello</p>
<iframe id="myIframe" width="100" height="200" src="Page2.html"></iframe>
<p>
    <button id="theButton" value="a button" onclick="hideDiv()"></button>

</p>
<script>
    function hideDiv() {
        var iFrame = document.getElementById("myIframe");
        var theDiv = iFrame.contentWindow.document.getElementById("div1");
        theDiv.style.visibility = "hidden";
    }

</script>

このコードはFirefoxで機能します。他のブラウザでは試していません。

于 2013-02-28T03:39:15.943 に答える
1

チェックされた（トグルで）divを非表示/表示するjqueryの例を示します

<!--jquery code -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
 </script>
<script language="jscript">
$(document).ready(function(){
$("#NewVendor").click(function(){
    $("#ebdiv").toggle();
});
});
</script>
<!--jquery code ends -->

<!-- cf part--->
 <input type="checkbox" name="NewVendor" id="NewVendor"  /> New Vendor

 <div id="ebdiv" >
<table  border="0" width="70%" cellspacing="0" cellpadding="0" id="cartContentsDisplay">
<tr>
<td width="25%"><b>New Vendor </b></td> <td>:*</td><td align="left"><cfinput type="text" name="VendorName" id="VendorName" value="" size="30"  />
</td>
</tr>
<tr>
<td><b>Address</b> </td> <td>:*</td><td align="left"><cfinput type="text" name="Address" id="Address" value="" size="30" />
</td>
</tr>
<tr>
</table>
<<!-- cf part ends--->

Chromeで動作しており、他のブラウザでチェックインしました。

于 2013-02-28T05:07:20.793 に答える
1

オーバースコープの問題であることが判明しました。フォーム名を削除すると問題が解決しました。

window.my_iframe.document.getElementById('GuestLayer1').style.display = 'none';
于 2013-02-28T15:18:53.427 に答える
0

このコードを試してください...........。

<script type='text/javascript'>
function showDiv() {
    if (document.getElementById('hiddenDiv').style.display == 'block') {
        document.getElementById('hiddenDiv').style.display = 'none';
    } else {
        document.getElementById('hiddenDiv').style.display = 'block';
    }
}
</script>
<div id="hiddenDiv"  style="display:none;" class="answer_list" >
  WELCOME
</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />
于 2013-03-02T07:04:16.187 に答える