SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Forms: Select options, filtered by another select option

    Hey chaps, hope someone can help with this:
    I have a PHP form, with a couple of Select menus, which are populated from two SQL tables:
    // Select 1 (main colour):
    Code:
    Red
    Blue
    Green
    // Select 2 (shade colour):
    Code:
    Light Red
    Dark Red
    Light Blue
    Dark Blue
    Light Green
    Dark Green
    What I'm after is something to filter the second select option, after the first select option has been chosen
    // Select 1:
    Code:
    Red
    // Select 2:
    Code:
    Light Red
    Dark Red
    I'm pretty sure this is possible, but not sure how to go about it, any help would be most appreciated.

  2. #2
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you have simple and short list in the second one then you can create all possible sub selects and just show/hide according to first selection with the help of JavaScript.
    Otherwise you must go for AJAX. I would suggest to go for jQuery AJAX.
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  3. #3
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi rajug,
    the second list will constantly updated, the two stuctures are basically:
    // Main colour table
    Code:
    id, name
    1, Red
    // Shade colour table
    Code:
    id, name, FK_colourid
    1, Light Red, 1
    Based on this, would you still go for jQuery?

  4. #4
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Umm yes if you really have a real dynamic list in the shade and main colors can have more colors then it is really good go for AJAX (not only jQuery - jQuery is only a framework that can be used so you can use any or your own AJAX script as well).

    But if you have few colors only then you can just load all the possible shade colors and show/hide them as per the main color selection like this:
    HTML Code:
    <html>
    <head>
    	<title>colors</title>
    	<script type="text/javascript">
    	function showShade(color){
    		var old_color = document.getElementById('old_color').value;
    		if(old_color != ""){
    			if(document.getElementById(old_color)){
    				document.getElementById(old_color).style.display = 'none';
    			}
    		}
    		if(document.getElementById(color)){
    			document.getElementById(color).style.display = 'block';
    			document.getElementById('old_color').value = color;
    		}
    	}
    	</script>
    </head>
    <body>
    <form enctype="multipart/form-data" action="" method="POST">
    Color: 
    <select name="colors" onchange="showShade(this.value);">
    	<option value="" selected="">Select</option>
    	<option value="Red">Red</option>
    	<option value="Blue">Blue</option>
    	<option value="Green">Green</option>
    </select>
    <br />
    Shade Colour: 
    <select name="shade" id="Red" style="display: none;">
    	<option value="Light Red" selected="">Light Red</option>
    	<option value="Dark Red">Dark Red</option>
    </select>
    <select name="shade" id="Blue" style="display: none;">
    	<option value="Light Blue" selected="">Light Blue</option>
    	<option value="Dark Blue">Dark Blue</option>
    </select>
    <select name="shade" id="Green" style="display: none;">
    	<option value="Light Green" selected="">Light Green</option>
    	<option value="Dark Green">Dark Green</option>
    </select>
    <input type="hidden" id="old_color" value="" />
    </form>
    </html>
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  5. #5
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi rajug, thanks for the example, I'm guessing I'll have to go for an AJAX solution, as both SQL tables will be continually updated. Thanks anyway.


Bookmarks

Posting Permissions

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