2

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

4 回答 4

1

我给出 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 上运行，并在其他浏览器中进行了检查。

于 2013-02-28T05:07:20.793 回答
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

事实证明这是过度范围的问题，删除表单名称解决了问题：

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 回答