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

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，您需要向服務器發送一些信息。您可以通過AJAX在iframe中執行此操作（比聽起來容易），但仍需要進行一些提交。

我會從一個純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>