Question

我在ColdFusion5中进行编程，并尝试根据select语句的onchange调用显示/隐藏div代码块。我在网上发现了类似的问题，但是我没有运气使用style.display或可见性。使用此代码，我可以进入js函数，第一个警报触发select选择的值，我在if语句中得到第二个警报。一旦它到达隐藏/显示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");
        }
}

Answer 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。我没有在其他浏览器中尝试过。

Answer 2

我给jquery示例隐藏/显示选中的div（在切换中）

<!--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，并在其他浏览器中检查过。

Answer 3

事实证明这是一个过度扩张的问题，删除表单名称解决了问题：

window.my_iframe.document.getElementById('GuestLayer1').style.display = 'none';

Answer 4

试试这段代码............

<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()" />

Coldfusion使用javascript来显示/隐藏div块

4 个答案: