如何在沒有表單提交的情況下制作下拉列表顯示消息

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

當客戶端運行javascript時，ColdFusion在服務器端運行。 換句話說，要使用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>