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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    cascade selection - Help needed.

    hi guys
    sorry for common title but really didn't find proper title for this problem
    please see my code
    Code:
    $(document).ready(function(){
    			$("select#heading").attr("disabled","disabled");
                $("select#type").attr("disabled","disabled");
                $("select#category").change(function(){
    				//$("select#heading").attr("disabled","disabled");
                	$("select#type").attr("disabled","disabled");
                	$("select#type").html("<option>wait...</option>");
    				
                	var id = $("select#category option:selected").attr('value');
                $.post("select_type.php", {id:id}, function(data){
                    $("select#type").removeAttr("disabled");
                    $("select#type").html(data);
    				
    				$("select#type").change(function(){
    					var id2 = $("select#type option:selected").attr('value');
    					$.post("select_heading.php", {id2:id2}, function(){
    					$("select#heading").removeAttr("disabled","disabled");
                	    $("select#heading").html(data)
    					});
                });
            });
    			}); });
    This is cascade selection script code.
    There are 3 selection
    first - category, second - type, third -heading
    When i run this script the selection list of heading(3rd) & type(2nd) both are same.
    here is my other code which supply dynamic data string to various selection's
    Code:
    <?php
    class SelectList
    {
        protected $conn;
    
            public function __construct()
            {
                $this->DbConnect();
            }
    
            protected function DbConnect()
            {
                include "moviecon.php";
                $this->conn = mysql_connect($host,$user,$password) OR die("Unable to connect to the database");
                mysql_select_db($db,$this->conn) OR die("can not select the database $db");
                return TRUE;
            }
    
            public function ShowCategory()
            {
                $sql = "SELECT * FROM smf_boards";
                $res = mysql_query($sql,$this->conn);
                $category = '<option value="0">choose...</option>';
                while($row = mysql_fetch_array($res))
                {
                    $category .= '<option value="' . $row['id_board'] . '">' . $row['name'] . '</option>';
                }
                return $category;
            }
    
            public function ShowType()
            {
                $sql ="SELECT * FROM smf_messages, smf_topics WHERE smf_topics.id_first_msg=smf_messages.id_msg AND smf_messages.id_board=$_POST[id] ORDER BY subject";
                $res = mysql_query($sql,$this->conn);
                $type = '<option value="0">choose...</option>';
                while($row = mysql_fetch_array($res))
                {
                    $type .= '<option value="' . $row['id_topic'] . '">' . $row['subject'] . '</option>';
                }
                return $type;
            }
    		 
    		 public function ShowHead()
            {
    			
                $sql = "SELECT * FROM smf_spiders";
                $res = mysql_query($sql,$this->conn);
                $head = '<option value="0">choose...</option>';
                while($row = mysql_fetch_array($res))
                {
                    $head .= '<option value="' . $row['id_board'] . '">' . $row['name'] . '</option>';
                }
                return $head;
            }
    }
    
    $opt = new SelectList();
    ?>
    please replay.
    thanks in advance

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,479
    Thanks
    6
    Thanked 981 Times in 954 Posts
    JavaScript is interacting with HTML, not with PHP. So, it would help more to see the generated HTML rather than the PHP script.

    Also, I don’t think $("select#category option:selected").attr('value'); is the right way to check for a selected option. I think it should rather be $("#category").val();.

    By the way, don’t ever do stuff like $("select#category"), it makes jQuery traverse the entire DOM for select elements before getting the actual element and this makes the script very slow. Since an ID is unique anyway you should only use the ID selector (as I’ve shown above). Also, as part of the DRY principle, chain your functions as much as possible.
    This:
    Code:
    $("select#type").attr("disabled","disabled");
    $("select#type").html("<option>wait...</option>");
    … can easily be rewritten as:
    Code:
    $("#type").attr("disabled","disabled").html("<option>wait...</option>");
    Read this article, especially points 5 and 6.

  • #3
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Nice information.
    But may problem is that i did not get updated data set in my third selector.
    please guide me in that.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    I'm guessing, because the HTML is not included, that the category select will chose which of the two other selects get content and is active. If true a simplifies solution follows:
    HTML with the Jquery
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    <style type="text/css">
    
    </style>
    </head>
    
    <body>
    category<br />
    <select id="category">
    <option value="">--</option>
    <option value="1">Headings</option>
    <option value="2">The Type</option>
    </select><br /><br /><br /><br />
    
    heading<br />
    <select id="heading" disabled="disabled">
    <option value="">--</option>
    <option value="1">Rainbow</option>
    <option value="2">Cash</option>
    </select><br />
    type<br />
    <select id="type" disabled="disabled">
    <option value="">--</option>
    <option value="1">Rainbow</option>
    <option value="2">Cash</option>
    </select><br />
    
    <script type='text/javascript' src='javascript/jquery.js'></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#category").change(function(){
        	$("#type").html("<option>wait...</option>");
        	$("#heading").html("<option>wait...</option>");
        	var id = $("#category option:selected").attr('value');
            $.post("test.php", {id:id}).done(function(data){
    			if(data.charAt(0)  == 1){
    				$("#heading").removeAttr("disabled","disabled");
    				$("#type").attr("disabled","disabled");
    				$("#heading").html(data);
    			}
    			if(data.charAt(0)  == 2){
    				$("#type").removeAttr("disabled","disabled");
    				$("#heading").attr("disabled","disabled");
    				$("#type").html(data);
    			}
    		});
    	});
    });
    
    </script>
    </body>
    </html>
    If wrong at lest notice the $.POST call, yours shouldn't work.

    An example of the PHP:
    PHP Code:
    <?php
    $one 
    $_POST["id"];
    if (
    $one == 1){
        echo 
    "1<option>Choices for headings</option>";
    }else if(
    $one == 2){
        echo 
    "2<option>Picks for types</option>";
    }
    ?>
    Evolution - The non-random survival of random variants.


  •  

    Posting Permissions

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