Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Dynamically remove options from dropdown. How to return to original dropdown list?

    Hi,

    I'm trying to integrate an address finder (http://www.craftyclicks.co.uk/) into my shopping cart (OsCommerce). I can get it to work but I need to add my own functionality. I'm not very experienced with JavaScript and my head has entered an infinite loop by now.

    The problem is that the address finder script can change the selected country in a drop-down list depending on the postcode entered by the user (using the onblur event handler). What I need it to do is to remove all other countries depending on the postcode. I can get it to remove all other countries but how do i return to the original list of countries when the postcode is changed again? Once all other counties are removed, the drop-down list will obviously only have one option left... I guess the question is also how does a function remember what it has done before, when it is called again?

    I have written this short test script as it is easier to work with than the craftyclicks oscommerce contribution:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     
    <head>
    
    <title>HTML Template</title>
     
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    
    <script type="text/javascript">
    //<![CDATA[
    
    function store(element) {
    
    // store values
    
    	var cl = element;
    	
    	var text_list = new Array();
    			
    	var value_list = new Array();
    	
    	var length = cl.length;
    	
    	for (var foo=0; foo<length; foo++) {
    	
    		text_list[foo] = cl.options[foo].text;
    		
    		value_list[foo] = cl.options[foo].value;
    		
    		alert("text array " + foo + " " + text_list[foo]);
    		
    		alert("value array " + foo + " " + value_list[foo]);
    		
    	}
    	
    	populate(cl, text_list, value_list);
    
    }
    
    function populate(element, text, value) {
    
    	// populate options with previously stored values
    	
    	var cl = element;
    	
    	var length = cl.length;
    
    	cl.options.length=0;	
    	
    	for (var bar=0; bar<length; bar++) {
    		
    		cl.options[bar]= new Option(text[bar], value[bar], false, false);
    		
    	}
    	
    }
    
    function crafty_set_country(code) {	
    
    	var cl = document.getElementById('select');
    	
    	store(cl);
    	
    	for (var i=0; i<cl.length; i++) {
    
    		if (cl.options[i].value == code) {
    
    			alert(cl.options[i].value + " found");
    			
    			var value = cl.options[i].value;
    			
    			var text = cl.options[i].text;
    			
    			cl.options.length=0;
    			
    			cl.options[0]=new Option(text, value, true, true);
    			
    			/*
    			for (var j=0; j<cl.length; j++) {
    			
    				alert("second loop " + cl.options[j].text);
    				
    				if (cl.options[i].value != code) {
    				
    					cl.options[j]
    				
    				}
    			
    			}
    			*/
    			
    		} else {
    		
    		alert(cl.options[i].value);
    		
    		}
    		
    	}
    	
    }
    
    //]]>
    </script>
    
    </head>
     
    <body>
    
    <form>
    
    <select id="select">
      <option value="10">ten</option>
      <option value="20">twenty</option>
      <option value="30">thirty</option>
      <option value="40">fourty</option>
      <option value="50">fifty</option>
      <option value="60">sixty</option>
    </select>
    
    <input type="button" value="remove" name="button" onClick="crafty_set_country(50)">
    <input type="button" value="repopulate" name="button" onClick="crafty_set_country(100)">
    
    </form>
    
    </body>
    </html>
    Many thanks!

    Martin

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,930
    Thanks
    56
    Thanked 552 Times in 549 Posts
    If I understand correctly, it seems that you are better storing your orginal data in an array and populating your select dynamically onload. That6 way you can just call that function again to repopulate the list:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     
    <head>
    
    <title>HTML Template</title>
     
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    
    <script type="text/javascript">
    //<![CDATA[
    
    var codes =[["ten",10],["twenty",20],["thirty",30],["forty",40],["fifty",50]]
    
    function populate() {
    for (var i=0; i<codes.length; i++) {
    		document.getElementById("select").options[i]= new Option(codes[i][0], codes[i][1])
    	}
    }
    
    function crafty_set_country(code) {
    var list=document.getElementById("select");
    for (x = list.length - 1; x>=0; x--) {
    	if (list[x].value!=code)	
    	list.remove(x);
    	}
    }
    
    //]]>
    </script>
    
    </head>
     
    <body onload="populate()">
    
    <form>
    
    <select id="select">
    
    </select>
    
    <input type="button" value="remove" name="button" onClick="crafty_set_country(50)">
    <input type="button" value="repopulate" name="button" onClick="populate()">
    
    </form>
    
    </body>
    </html>

  • Users who have thanked xelawho for this post:

    marty80 (03-24-2012)

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for your reply!

    The dropdown list gets populated by PHP. So it can't be populated from an existing JavaScipt array. That's why I wrote a function to store the values from the list first.

    The list must be repopulated as soon as a user changes the postcode field and the onblur triggers the crafty_set_country() function again.

    So if the user enters a postcode that matches the country gets changed and all other items are removed from the dropdown list (originally only the selected option was changed).

    If the user changes the postcode again the dropdown list must return to its original state and depending on a match remain unchanged or all options but one are removed again.

    in your script instead of having a repopulate button this would correspond to a button calling the crafty_set_country() function with a non-matching value which should then repopulate the select.
    Last edited by marty80; 03-24-2012 at 09:50 PM. Reason: addition

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,930
    Thanks
    56
    Thanked 552 Times in 549 Posts
    Quote Originally Posted by marty80 View Post
    The dropdown list gets populated by PHP. So it can't be populated from an existing JavaScipt array.
    you can't populate the array from php? because if I understand the rest of it, it could look like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     
    <head>
    
    <title>HTML Template</title>
     
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    
    <script type="text/javascript">
    //<![CDATA[
    
    var codes =[["ten",10],["twenty",20],["thirty",30],["forty",40],["fifty",50]]
    
    function populate() {
    for (var i=0; i<codes.length; i++) {
    		document.getElementById("select").options[i]= new Option(codes[i][0], codes[i][1])
    	}
    }
    
    function crafty_set_country(code) {
    var list=document.getElementById("select");
    for (x = list.length - 1; x>=0; x--) {
    	if (list[x].value!=code)	
    	list.remove(x);
    	}
    }
    
    //]]>
    </script>
    
    </head>
     
    <body onload="populate()">
    
    <form>
    
    <select id="select">
    
    </select>
    
    <input type="text" onblur="populate(); crafty_set_country(this.value)">
    
    
    </form>
    
    </body>
    </html>

  • Users who have thanked xelawho for this post:

    marty80 (03-25-2012)

  • #5
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    This is best done on the server. When the user selects a postcode, refresh the page and have your php code create the correct country options.

    If you don't want a page refresh, you can use AJAX to repopulate the countries drop down but AJAX won't work on mobile devices that do not support javascript.

    But whether you use ajax or not, get your php code to populate the countries drop down and you won't have to use javascript unless you want to use AJAX.

  • Users who have thanked Mishu for this post:

    marty80 (03-25-2012)

  • #6
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I would like to avoid having to refresh the page and AJAX is a bit too involved for me at this point.

    But I think I can do something with xelawho's first suggestion. I could load the JavaScript array on page load with the data from the select and repopulate it when no matches are found. So all elements are removed in the loop and if there are zero elements (no match) I repopulate the select. Not very elegant but if it does the job...

    Many thanks for your help so far!

  • #7
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by marty80 View Post
    But I think I can do something with xelawho's first suggestion. I could load the JavaScript array on page load with the data from the select and repopulate it when no matches are found. So all elements are removed in the loop and if there are zero elements (no match) I repopulate the select.
    I would recommend keeping your <select> PHP-generated and saving all default options on load. That way at least the list is always populated.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     
    <head>
    
    <title>HTML Template</title>
     
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    
    <script type="text/javascript">
    //<![CDATA[
    
    function saveOptions( elem )
    {
      elem.dOptions = [];
      
      for( var i = 0, temp; ( temp = elem.options[ i ] ); i++ )
      {
        elem.dOptions.push( temp.text );    
        elem.dOptions.push( temp.value );      
      }
    }
    
    function populate( elem ) 
    {
      var data = elem.dOptions;   
        
      for( var i=0, j=0; i < data.length; i += 2, j++ ) 
        elem.options[ j ] = new Option( data[ i ], data[ i+1 ] ); 
    }
    
    function crafty_set_country( elem, code ) 
    {
      var list = elem.options;
      
      for (var x = list.length - 1; x>=0; x--) 
      {      
        if( list[x].value!=code )	
          list.remove(x);
      }
    }
    
    //]]>
    </script>
    
    </head>
     
    <body onload="saveOptions( document.getElementById( 'select' ) )">
    
    <form>
    
    <select id="select" name='mySelect'>
      <option value="10">ten</option>
      <option value="20">twenty</option>
      <option value="30">thirty</option>
      <option value="40">fourty</option>
      <option value="50">fifty</option>
      <option value="60">sixty</option>
    </select>
    
    <input type="button" value="remove" name="button" onClick="crafty_set_country( mySelect, 50 )">
    <input type="button" value="repopulate" name="button" onClick="populate( mySelect )">
    
    </form>
    
    </body>
    </html>


  •  

    Posting Permissions

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