Javascript 如何在不提交表单的情况下使下拉列表显示消息

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

我有下面的下拉列表，实际上我使用的是cfselect，但是我的代码不会出现在这个论坛上，所以我用select而不是cfselect编写它

---

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>

---

“我的代码不会出现在这个论坛上”是什么意思？没有理由你不能在你的问题上发表文章

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