Something like this is sort of a funky way of doing that (however that will result in showing in alert also when you just click on the the select box twice without selecting a value):
Purpose of request for forced onchange event in drop-down select box.
Thank you. That seems to have done the trick I wanted.
Below is an example of how I wanted to use it.
It displays a single drop-down box, but allows multiple displays based upon the higher selection
and it allows to move back up the list if the user changes their mind.
Code:
<!DOCTYPE HTML>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title> Single-Multiple-Dropdown </title>
<script type = "text/javascript">
// Modified from: http://www.codingforums.com/showthread.php?t=272864
// Additional help: http://www.webdeveloper.com/forum/showthread.php?264657-Can-we-force-a-change-in-drop-down
var arr0 = [['Choose Country',0],['Australia',1],['Canada',2],['USA',3]];
var arr1 = [['Choose Province (back)',0],['New South Wales',11],['Queensland',11],['South Australia',11],
['Tasmania',11],['Victoria',11],['Western Australia',11]];
// set 2nd parameter to -1 if no further depth is necessary
var arr11 =[['Choose Capital',1],['Sydney',-1],['Brisbane',-1],['Adelaide',-1],
['Hobart',-1],['Melbourne',-1],['Perth',-1]];
var arr2 = [['Choose Province (back)',0],['Ontario',21],['Quebec',22],['Nova Scotia',23]];
var arr21 =[['Choose Capital',2],['Toronto',-1]];
var arr22 =[['Choose Capital',2],['Quebec City',-1]];
var arr23 =[['Choose Capital',2],['Halifax',-1]];
var arr3 = [['Choose State (back)',0],['Alabama',31],['Alaska',32],['California',33],
['Florida',34],['Texas',35]];
var arr31 =[['Choose Capital',3],['Birmingham',-1],['Huntsville',-1],['Dothan',-1],['Mobile',-1]];
var arr32 =[['Choose Capital',3],['Juneau',-1],['Anchorage',-1],['Klondike',-1]];
var arr33 =[['Choose Capital',3],['Sacramento',-1],['San Diego',-1],['Los Angles',-1],['Monterey',-1],['Lompoc',-1]];
var arr34 =[['Choose Capital',3],['Tallahassee',-1],['Miami',-1],['Pensacola',-1],['St. Augustine',-1],['Tampa',-1]];
var arr35 =[['Choose Capital',3],['Austin',-1],['Houston',-1],['Dallas',-1],['San Antonio',-1],['El Paso',-1]];
function nextchoice (sel) {
var val=Number(sel.value);
if (val < 0) { return; }
var arr=[];
switch(val){
case 0 : arr = [].concat(arr0); break;
case 1 : arr = [].concat(arr1); break;
case 2 : arr = [].concat(arr2); break;
case 3 : arr = [].concat(arr3); break;
case 11 : arr = [].concat(arr11); break;
case 21 : arr = [].concat(arr21); break;
case 22 : arr = [].concat(arr22); break;
case 23 : arr = [].concat(arr23); break;
case 31 : arr = [].concat(arr31); break;
case 32 : arr = [].concat(arr32); break;
case 33 : arr = [].concat(arr33); break;
case 34 : arr = [].concat(arr34); break;
case 35 : arr = [].concat(arr35); break;
default: alert('Not available yet'); break;
}
if (arr.length>0) {
sel.options.length = 0;
for (var i = 0; i < arr.length; i++) {
sel.options[i]=new Option(arr[i][0],arr[i][1]);
}
}
// sel.selectedIndex = 0;
}
var object;
var count;
function onClickShow(info) {
if (info != null && info == object) {
count++;
if (count == 2) { nextchoice(info); count=0; }
}
}
function setBaseVars(info) {
object = info; count = 0;
}
</script>
</head>
<body>
<select name = "selection" id="selection" onfocus="setBaseVars(this)" onclick="onClickShow(this)">
<option value="0">Choose Country</option>
<option value="1">Australia</option>
<option value="2">Canada</option>
<option value="3">USA</option>
</select>
</body>
</html>
seems like a good solution. I'm curious about the setBaseVars function, though. This bit:
Code:
if (info != null && info == object) {
will always return true because those variables are set onfocus (which as I understand happens before onclick) so why bother testing for them? The select can never be null and it will always == object, so what purpose is setBaseVars serving, except to set count to 0 which could be done in the global declaration and it gets reset in onClickShow anyway?
The reason for setBaseVars is that if you have more than one drop down you got to make sure you're counting for the right one. For an example with single drop down you dont need it, but I guess my thought process came up with it automatically as a precaution . The if statement is redundant indeed.
The reason for setBaseVars is that if you have more than one drop down you got to make sure you're counting for the right one. For an example with single drop down you dont need it, but I guess my thought process came up with it automatically as a precaution . The if statement is redundant indeed.
Seems like a good concept to keep in mind if more that one of this type drop-down is required on one page.
My particular leaning would probably be to sequence individual drop-downs rather than use one single element with multiple displays.
I still appreciate the solution as it was an interesting POC (Proof Of Concept) piece of code.
Thank you.
[RESOLVED] Can we force a change in drop-down?
Reply With Quote
Purpose of request for forced onchange event in drop-down select box.
. The if statement is redundant indeed.
Originally Posted by N1tr0gen
Bookmarks