www.webdeveloper.com
Results 1 to 8 of 8

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

  1. #1
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,439

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

    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>
    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.
    Last edited by JMRKER; 09-12-2012 at 03:48 PM.

  2. #2
    Join Date
    Sep 2012
    Location
    Toronto
    Posts
    16
    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>

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,439

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

  4. #4
    Join Date
    Nov 2010
    Posts
    1,101
    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?

    or am I missing something?

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,439
    Good observation.

    Here is the modified logic...
    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 count = 0;
    function onClickShow(info) {
      count++;  if (count == 2) { nextchoice(info); count=0; }
    }
    
    </script>
    </head>
    <body>
    
    <select name = "selection" id="selection" 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>
    Last edited by JMRKER; 09-12-2012 at 11:17 PM.

  6. #6
    Join Date
    Sep 2012
    Location
    Toronto
    Posts
    16
    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.
    Last edited by N1tr0gen; 09-13-2012 at 10:59 AM.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,439
    Quote Originally Posted by N1tr0gen View Post
    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.

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,439

    Thumbs up

    Sorry...double post.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles