Hide / show list in PHP

Question

I have a list generated by MySQL. When I click one item of the list, it shows a new list related to the item in the same page.

Edit:

Here is the code how I get the list.

<?php
    include("./conn/connect.php");
    $query = "SELECT * FROM entreprise ORDER BY id";
    $result = mysql_query($query) or die("result failed: ".mysql_error());
    while($row = mysql_fetch_assoc($result) ){
        echo $row['name'].'<br>';
    }
?>

I can't finish the latter part.

How can I achieve that?

Answer 1

Are you trying to run the query in PHP and populate the lists in drop-downs in an HTML page? If so, you should use JavaScript to show and hide them based on what is clicked on the previous list. you can use events to find out what was clicked, submit a form or something and get the corresponding list to be shown below it.

did I get your problem right? or am I way off?

Edit:

OK. Using JavaScript to hide show elements doesn't need any tutorial.

Have the list in a form. The onchange event will tell you when the selected item has changed. when it happens, post the form to the same page. In PHP, you can get the selected item. Then run your query and get the second list based on this input. use Echo or something to write the new list in HTML.

<?php
// Here, $_POST['options'] will give you the selected item from first list.
// Run your query to get the next list and use echo() to write 
// out the HTML or something
?>

<form name="myform" method="POST" action="test.php">
    <select name="options" onchange="myform.submit();">
        <option value="item1">item1</option>
        <option value="item2">item2</option>
        <option value="item3">item3</option>
    </select>
</form>

<?php
// Use a 'for each' kind of loop here and run through the results 
// of your second list. Construct the secondary select tag using 
// the data here.
?>

You can construct the first list also using PHP after running query. I didn't do it because the code would get long and complicated.

Basically you run the first query and construct the first list and add the events as shown.

When the user selects something in that list, you submit it to the same page, and based on that value, you run a second query and construct the secondary list.

Answer 2

If you make your list using semantic code you'll find it easier to style with CSS. (IE use UL, LI etc).

<?php
include("./conn/connect.php");
$query = "SELECT * FROM entreprise ORDER BY id";
$result = mysql_query($query) or die("result failed: ".mysql_error());
echo "<ul id=\"hideme\">";
while($row = mysql_fetch_assoc($result) ){
    echo "<li>" . $row['name'] . "</li>";
}
echo "</ul>";

?>

And your JQuery is:

 $(document).ready(function() {
   $('#toggle').click( function() {
    $('#hideme').toggle();
   });
});

Just make a link, button, whatever something like this:

<input type="submit" name="toggle" value="Toggle list show" id="toggle" />

Answer 3

Hi there! :-)

You could use a jQuery javascript tree. Go to here for a demo

Is this the kind of thing you're after?