Question

我有以下用于填充文本输入的CFSELECT标记：

<cfselect id="this" name="this" bind="cfc:Data.getThis()" bindonload="true" />

<cfselect id="that" name="that" bind="cfc:Data.getThat({p1})" />

<cfselect id="theOther" name="theOther" bind="cfc:Data.getTheOther({p1}, {p2})" />

文本输入是唯一需要以表单形式提交的值：

<cfform name="addItem" method="post" action="somepage.cfm">
    <cfinput 
        type="text" 
        id="item" 
        name="item" 
        bind="cfc:Data.getResult({this}, {that}, {theOther})" /><br />

    <cfinput 
        type="submit" 
        name="addButton" 
        value="Add Item" />
</cfform>

我希望在完成所有三个选择后，表单及其内容仅显示，并且文本输入有一个值。做这个的最好方式是什么？我假设使用CFDIV是最好的方法，但我不知道如何以这种方式加载动态内容（CFINPUT）。

Answer 1

<cfselect id="this" name="this" bind="cfc:Data.getThis()" bindonload="true" onChange="toggleForm();" />
<cfselect id="that" name="that" bind="cfc:Data.getThat({p1})" onChange="toggleForm();" />
<cfselect id="theOther" name="theOther" bind="cfc:Data.getTheOther({p1}, {p2})" onChange="toggleForm();" />

<div id="theForm" style="display:none">
<cfform name="addItem" method="post" action="somepage.cfm">
    <cfinput 
        type="text" 
        id="item" 
        name="item" 
        bind="cfc:Data.getResult({this}, {that}, {theOther})" /><br />

    <cfinput 
        type="submit" 
        name="addButton" 
        value="Add Item" />
</cfform>
</div>

<script type="text/javascript">
    function toggleForm(){
        var a = document.getElementById("this").selectedIndex;
        var b = document.getElementById("that").selectedIndex;
        var c = document.getElementById("theOther").selectedIndex;
        if (a > -1 && b > -1 && c > -1){
            document.getElementById("theForm").style.display = "";
        }
    }
</script>

就个人而言，我会通过使用jQuery简化JS，但我不知道你是否已经在你的网站上使用jQuery，而且我不想成为另一个“使用jquery”的空答案;所以这应该没有jQuery，如果你想要/需要没有它。（但是jQuery很棒！）

如何使用AJAX绑定本身取消隐藏具有动态内容的CFDIV？

1 个答案: