[英]In Django, how to make selecting a drop-down option automatically submit a form?
[英]How to make drop down list display message without form submit
我需要让我的下拉列表能够在选择时以纯文本显示相应的消息,而无需进行表单提交。 我不知道如何在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>
当客户端运行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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.