[RESOLVED] Can we force a change in drop-down?

@JMRKERSep 12.2012

When you code a drop-down selection box like this:

[code] <!DOCTYPE HTML> <html> <head> <title> Untitled </title> <script type=”text/javascript”> function Show(info) { alert(info.value+’ : ‘+ info.options[info.selectedIndex].text + ‘ : ‘ + info.selectedIndex); } </script>

</head> <body> <select id=”SBox” onchange=”Show(this)”> <option value=’0′> Choose One </option> <option value=’1′> Pick 1 </option> <option value=’2′> Pick 2 </option> <option value=’3’> Pick 3 </option> </select> </body> </html> [/code]

and you choose the same option a second time (or more), nothing changes (probably as would be expected) in the display.

Is there a way to force the alert to display each time a selection is chosen,
REGARDLESS of if the choice has changed or not?

I have tried changing the ‘onchange=’ to an ‘onclick=’, but that does not work as I would have expected.

to post a comment

JavaScript

7 Comments(s) _↴

@N1tr0genSep 12.2012 — #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):

[CODE]<!DOCTYPE HTML>
 <html>
 <head>
 <title> Untitled </title>
 <script type="text/javascript">
 var object;
 var count;
 
 function onClickShow(info) {
 if(info != null && info == object) {
 count++;
 if(count == 2) {
 alert(info.value+' : '+ info.options[info.selectedIndex].text + ' : ' + info.selectedIndex);
 count=0;
 }
 }
 }
 
 function setBaseVars(info) {
 object = info;
 count = 0;
 }
 
 </script>
 
 </head>
 <body>
 <select id="SBox" onfocus="setBaseVars(this)" onclick="onClickShow(this)" >
 <option value='0'> Choose One </option>
 <option value='1'> Pick 1 </option>
 <option value='2'> Pick 2 </option>
 <option value='3'> Pick 3 </option>
 </select>
 </body>
 </html>[/CODE]

@JMRKERauthorSep 13.2012 — #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.

<i>
 </i>&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
 &lt;head&gt;
 &lt;title&gt; Single-Multiple-Dropdown &lt;/title&gt;
 
 &lt;script type = "text/javascript"&gt;
 // 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 &lt; 0) { return; }
 
 var arr=[];
 switch(val){
 case 0 : arr = [].concat(arr0); break;
 
 <i>    </i>case 1 : arr = [].concat(arr1); break;
 <i>    </i>case 2 : arr = [].concat(arr2); break;
 <i>    </i>case 3 : arr = [].concat(arr3); break;
 
 <i>    </i>case 11 : arr = [].concat(arr11); break;
 
 <i>    </i>case 21 : arr = [].concat(arr21); break;
 <i>    </i>case 22 : arr = [].concat(arr22); break;
 <i>    </i>case 23 : arr = [].concat(arr23); break;
 
 <i>    </i>case 31 : arr = [].concat(arr31); break;
 <i>    </i>case 32 : arr = [].concat(arr32); break;
 <i>    </i>case 33 : arr = [].concat(arr33); break;
 <i>    </i>case 34 : arr = [].concat(arr34); break;
 <i>    </i>case 35 : arr = [].concat(arr35); break;
 
 <i>    </i>default: alert('Not available yet'); break;
 }
 if (arr.length&gt;0) {
 sel.options.length = 0;
 for (var i = 0; i &lt; 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 &amp;&amp; info == object) {
 count++;
 if (count == 2) { nextchoice(info); count=0; }
 }
 }
 
 function setBaseVars(info) {
 object = info;  count = 0;
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;select name = "selection" id="selection" onfocus="setBaseVars(this)" onclick="onClickShow(this)"&gt;
 &lt;option value="0"&gt;Choose Country&lt;/option&gt; 
 &lt;option value="1"&gt;Australia&lt;/option&gt; 
 &lt;option value="2"&gt;Canada&lt;/option&gt; 
 &lt;option value="3"&gt;USA&lt;/option&gt; 
 &lt;/select&gt; 
 
 &lt;/body&gt;
 &lt;/html&gt;

@xelawhoSep 13.2012 — #seems like a good solution. I'm curious about the setBaseVars function, though. This bit:
[CODE]if (info != null && info == object) {[/CODE]

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?

or am I missing something?

@JMRKERauthorSep 13.2012 — #Good observation.

Here is the modified logic...

<i>
 </i>&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
 &lt;head&gt;
 &lt;title&gt; Single-Multiple-Dropdown &lt;/title&gt;
 
 &lt;script type = "text/javascript"&gt;
 // 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 &lt; 0) { return; }
 
 var arr=[];
 switch(val){
 case 0 : arr = [].concat(arr0); break;
 
 <i>    </i>case 1 : arr = [].concat(arr1); break;
 <i>    </i>case 2 : arr = [].concat(arr2); break;
 <i>    </i>case 3 : arr = [].concat(arr3); break;
 
 <i>    </i>case 11 : arr = [].concat(arr11); break;
 
 <i>    </i>case 21 : arr = [].concat(arr21); break;
 <i>    </i>case 22 : arr = [].concat(arr22); break;
 <i>    </i>case 23 : arr = [].concat(arr23); break;
 
 <i>    </i>case 31 : arr = [].concat(arr31); break;
 <i>    </i>case 32 : arr = [].concat(arr32); break;
 <i>    </i>case 33 : arr = [].concat(arr33); break;
 <i>    </i>case 34 : arr = [].concat(arr34); break;
 <i>    </i>case 35 : arr = [].concat(arr35); break;
 
 <i>    </i>default: alert('Not available yet'); break;
 }
 if (arr.length&gt;0) {
 sel.options.length = 0;
 for (var i = 0; i &lt; arr.length; i++) {
 sel.options[i]=new Option(arr[i][0],arr[i][1]);
 }
 }
 //  sel.selectedIndex = 0;
 }
 
 var count = 0;
 function onClickShow(info) {
 count++;  if (count == 2) { nextchoice(info); count=0; }
 }
 
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;select name = "selection" id="selection" onclick="onClickShow(this)"&gt;
 &lt;option value="0"&gt;Choose Country&lt;/option&gt; 
 &lt;option value="1"&gt;Australia&lt;/option&gt; 
 &lt;option value="2"&gt;Canada&lt;/option&gt; 
 &lt;option value="3"&gt;USA&lt;/option&gt; 
 &lt;/select&gt; 
 
 &lt;/body&gt;
 &lt;/html&gt;

@N1tr0genSep 13.2012 — #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.

@JMRKERauthorSep 13.2012 — #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.[/QUOTE]

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.

@JMRKERauthorSep 13.2012 — #Sorry...double post.

Also in #JavaScript _↴

[RESOLVED] Displaying 2 Images in Sequence Problem with JS Form (newbie alert!)Avoiding Alerter When Form Is Submitted And Ms Outlook Is Open

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Can we force a change in drop-down?

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] Can we force a change in drop-down?

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴