Change sequence no of multiple options field values using Javascript and mysql using coldfusion

Change sequence no of multiple options field values using Javascript and update database field values using coldfusion

	<cfoutput>
	<script type="text/javascript" language="JavaScript">
	function listbox_move(listID, direction)
	{
	var listbox = document.getElementById(listID);
	var selIndex = listbox.selectedIndex;
	if(-1 == selIndex)
	{
	alert("Please select an option to move.");
	return;
	}
	var increment = -1;
	if(direction == 'up')
	increment = -1;
	else
	increment = 1;
	if((selIndex + increment) < 0 ||
	(selIndex + increment) > (listbox.options.length-1))
	{
	return;
	}
	var selValue = listbox.options[selIndex].value;
	var selText = listbox.options[selIndex].text;
	listbox.options[selIndex].value = listbox.options[selIndex + increment].value
	listbox.options[selIndex].text = listbox.options[selIndex + increment].text
	listbox.options[selIndex + increment].value = selValue;
	listbox.options[selIndex + increment].text = selText;
	listbox.selectedIndex = selIndex + increment;
	}
	function listbox_selectall(listID, isSelect)
	{
	var listbox = document.getElementById(listID);
	for(var count=0; count < listbox.options.length; count++)
	{
	listbox.options[count].selected = isSelect;
	}
	}
	</script>
	<form name="ShortFields" action="updateSequence.cfm" method="post">
	<table border="0" width="440" cellpadding="0" cellspacing="1" bordercolor="red">
	<tr>
	<td align="left" valign="top" rowspan="2" width="50" bgcolor="##FFFFFF"></td>
	<td valign="top" align="center" class="Even" height="60"><br>
	Please select an Image and use the <b>UP</b> & <b>DOWN</b> buttons <br /> to change the sequence.
	</td>
	</tr>
	<tr>
	<td width="400" valign="top" align="center" class="GrayText">
	<select id="ShortID" name="ShortFilld" size="10" multiple class="NormalText" style="width:300px; height:200px">
	<option value="1">ABF</option>
	<option value="2">ABF</option>
	<option value="3">ACD</option>
	<option value="4">ADC</option>
	<option value="5">AEB</option>
	<option value="6">AFA</option>
	</select>
	</td>
	<td>
	<table width="100%">
	<tr>
	<td valign="top" align="left">
	<a href="javascript:void(0);" onclick="listbox_move('ShortID', 'up')">Move UP</a></td>
	</tr>
	<tr><td height="10"></td></tr>
	<tr>
	<td valign="top" align="left">
	<a href="javascript:void(0);" onclick="listbox_move('ShortID', 'down')">Move Down</a>
	</tr>
	</table>
	</td>
	</tr>
	<tr><td colspan="2" align="center">
	<input type="submit" value="Save" onclick="listbox_selectall('ShortID', true);">
	</td></tr>
	</table>
	</form>
	</cfoutput>

view raw ChangeSequence.cfm hosted with ❤ by GitHub

	<cfset Counter=1>
	<cfloop list="#ShortFilld#" index="InsertCount">
	<cfquery name="UpdateSEQN" datasource="xxxxx">
	update xyz
	set
	SEQN=#Counter#
	where
	FieldID = #ShortFilld#
	</cfquery>
	<cfset Counter=Counter+1>
	</cfloop>

view raw updateSequence.cfm hosted with ❤ by GitHub

I hope this is usefull for new programmers.