Question

我需要让我的下拉列表能够在选择时以纯文本显示相应的消息，而无需提交表单。我不知道如何在JavaScript或其他更奇特的技术中做到这一点。我是ColdFusion的新手。有人愿意给我一个简单的代码示例吗？谢谢你的帮助。

我有下面的下拉菜单（实际上我正在使用cfselect，但我的代码不会显示在此论坛中，因此我将其写在select而不是cfselect中）

<select name="MySchedule" class="Req">  
   <cfloop query="MySchedules">             
    <option value="#ScheduleId#">Schedule #xSequence#</option>
   </cfloop>            
</select>


<!--- the corresponding message should show up here as a plain text --->
<cfoutput query="MySchedules>
   #DateFrom# - #DateTo#<br>
   #ScheduleLocation#
</cfoutput>

Answer 1

ColdFusion在服务器端运行，而javascript在客户端运行。换句话说，要使用ColdFusion，您需要将一些信息发送到服务器。你可以通过iframe中的AJAX（比听起来更容易）做到这一点，但仍然需要提交一些提交。

我会从纯JS路线中接近这个：

<select id="MySchedule" name="MySchedule" class="Req" onChange="MyScheduleChange();">
    <cfoutput query="MySchedules">             
        <option value="#ScheduleId#">Schedule #xSequence#</option>
    </cfoutput>            
</select>

<div id="MyScheduleMessage"></div>

<script>
    var messageArr  = new Array();

    <cfoutput query="MySchedules">
        messageArr[#currentRow-1#]  = new Array();
        messageArr[#currentRow-1#][1]   = "#ScheduleId#";
        messageArr[#currentRow-1#][2]   = "#DateFrom# - #DateTo#<br>#ScheduleLocation#";
    </cfoutput>

    function MyScheduleChange() {
        var selVal  = document.getElementById('MySchedule').value;
        for (x=0; x<messageArr.length; x++) {
            if (messageArr[x][1] == selVal) {
                document.getElementById('MyScheduleMessage').innerHTML = messageArr[x][2];
            }
        }
    }
</script>

我使用页面顶部的以下查询测试了此代码：

<cfquery datasource="#ds#" name="MySchedules">
    SELECT  '1'         AS ScheduleID,
            '01'        AS xSequence,
            '1/1/2000'  AS DateFrom,
            '5/31/2000' AS DateTo,
            'PIT'       AS ScheduleLocation

    UNION

    SELECT  '2'         AS ScheduleID,
            '02'        AS xSequence,
            '3/1/2000'  AS DateFrom,
            '4/31/2000' AS DateTo,
            'NYC'       AS ScheduleLocation
</cfquery>

我提供了上面的清洁代码，以避免它压倒性，因为你说你是一个新手。以下是代码的一个版本，其中包含一些注释，可帮助您了解上述内容的工作原理：

<select id="MySchedule" name="MySchedule" class="Req" onChange="MyScheduleChange();">
    <!--- You probably should add a default blank option here --->
    <cfoutput query="MySchedules">             
        <option value="#ScheduleId#">Schedule #xSequence#</option>
    </cfoutput>            
</select>

<div id="MyScheduleMessage"></div>

<script>
    var messageArr  = new Array(); // This javascript array will hold the data from our query.

    <cfoutput query="MySchedules">
        // Javascript doesn't really do 2 dimensional arrays intuitively.  Below we create an array within the array.  It's like a ColdFusion 2 dimensional array.
        // Note the array index is #currentRow-1#.  That's because ColdFusion starts counting at 1, but Javascript starts counting at 0.
        messageArr[#currentRow-1#]      = new Array();
        messageArr[#currentRow-1#][1]   = "#ScheduleId#"; // This holds the schedule ID so we can find the correct row later.
        messageArr[#currentRow-1#][2]   = "#DateFrom# - #DateTo#<br>#ScheduleLocation#"; // This holds all the information that we plan to display
    </cfoutput>

    // The below function is called any time the user changes the select box value.
    function MyScheduleChange() {
        var selVal  = document.getElementById('MySchedule').value; // This gets the select box value and stores it in a variable so it's easier to use below.
        for (x=0; x<messageArr.length; x++) { // Here we loop over every row in the array
            if (messageArr[x][1] == selVal) { // Then we check to see if the scheduleID of this row matches the scheduleID the user selected.
                document.getElementById('MyScheduleMessage').innerHTML = messageArr[x][2]; // If so, we set the contents of the div to the info you wanted to display.
            }
        }
    }
</script>

如何在没有表单提交的情况下制作下拉列表显示消息

1 个答案: