multiple select form

Discussion in 'Programming' started by moondancer, Jan 13, 2008.

  1. #1
    Hi all!
    I have this problem standing from days and I did a lots of search around with no actual result.
    This is the result I need. For example:

    [​IMG]
    When Group One is selected, box2 display Cat 1 and Cat 3. When in box2 Cat 1 is selected, box3 displays Sub Cat 1, Sub Cat 3 and Sub Cat 4. ...and so on.

    Sure, the results are requested from DB - that's not the problem, the problem is displaying them in this way - chained selected, drop-downs, ajaxed :rolleyes:

    I tried to put in use chained select boxes by DHTMLGOODIES, but I cannot figure it out how to output input boxes (or even plain text) instead of select boxes and option values.

    Here is the <head> section:
    
    <script type="text/javascript" src="ajax.js"></script>
    <script type="text/javascript">
    
    var ajax = new Array();
    
    function getCityList(sel)
    {
      var countryCode = sel.options[sel.selectedIndex].value;
      document.getElementById('dhtmlgoodies_city').options.length = 0;	// Empty city select box
        if(countryCode.length>0){
    	var index = ajax.length;
    	ajax[index] = new sack();
    	ajax[index].requestFile = 'getCities.php?countryCode='+countryCode;	// Specifying which file to get
    	ajax[index].onCompletion = function(){ createCities(index) };	// Specify function that will be executed after file has been found
    	ajax[index].runAJAX();		// Execute AJAX function
    	}
    }
    
    function createCities(index)
    {
    	var obj = document.getElementById('dhtmlgoodies_city');
    	eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
    }
    
    
    function getSubCategoryList(sel)
    {
    	var category = sel.options[sel.selectedIndex].value;
    	document.getElementById('dhtmlgoodies_subcategory').options.length = 0;	// Empty city select box
    	if(category.length>0){
    	var index = ajax.length;
    	ajax[index] = new sack();
    	ajax[index].requestFile = 'getSubCategories.php?category='+category;	// Specifying which file to get
    	ajax[index].onCompletion = function(){ createSubCategories(index) };	// Specify function that will be executed after file has been found
    		ajax[index].runAJAX();		// Execute AJAX function
    	}
    }
    function createSubCategories(index)
    {
    	var obj = document.getElementById('dhtmlgoodies_subcategory');
    	eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
    }		
    </script>
    
    
    HTML:
    and <body> section:

    <form action="" method="post">
    <table>
    	<tr>
    		<td>Country: </td>
    <td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)">
    			<option value="">Select a country</option>
    			<option value="dk">Denmark</option>
    			<option value="no">Norway</option>
    			<option value="us">US</option>
    		</select>
    		</td>
    	</tr>
    	<tr>
    		<td>City: </td>
    		<td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city">
    		
    		</select>
    		</td>
    	</tr>
    	</table>
    </form>
    
    HTML:
    I'll appreciated any help.
     
    moondancer, Jan 13, 2008 IP
  2. moondancer

    moondancer Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Anyone can help?
     
    moondancer, Jan 13, 2008 IP