动态传递变量

What I am trying to achieve is populating a second dropbox box after a selection in the first drop down box.

I'm not too familar with AJAX (which I believe I will need to use to achieve this).

So far I have the following PHP code.

<select name="category">
    <?php 
    $q = $admindb->getParentCategories();
    while($row=mysql_fetch_assoc($q)){
        $title=$row['title'];
        $catid=$row['id'];
        ?>
        <option value="<?php echo $catid; ?>"<?php if($catid == $form->value("category")){ echo 'selected="selected"'; }?>><?php echo $title; ?></option>
        <?php
    }   
    ?>
</select>
<select name="subcategory">
    <?php 
    $q = $admindb->getSubCategories($catid);
    while($row=mysql_fetch_assoc($q)){
        $title=$row['title'];
        $catid=$row['id'];
        ?>
        <option value="<?php echo $catid; ?>"<?php if($catid == $form->value("subcategory")){ echo 'selected="selected"'; }?>><?php echo $title; ?></option>
        <?php
    }   
    ?>
</select>

As you can see, I have two dropdown boxes.

The problem is that the second box needs the selection of the first to work. So I need to implement a way of passing the selection from the first box onto the second box on the fly.

Could anyone offer any pointers about how to do this?

Thanks

You will need to isolate the code for creating the first and second dropdown into two separate PHP files. When someone selects a category in the first select box, issue an Ajax request to the file that generates the second listbox. Include, with the request, the selection in the first select box. I'd recommend using jQuery to perform the actual Ajax request.

Depending on where the data is coming from, you may or may not need an ajax call specifically. BUT you do need to catch the event and then populate the 2nd dropdown box accordingly. The easiest way to do this is by using jQuery events:

http://api.jquery.com/category/events/

There are TONES of tutorials for this as well. Just google it.

So you're going to have HTML, and you're going to use jQuery (Because it's baller.)

In your HTML, you're going to have a <form...> with your two drop down form fields.

I'm going to use short pseudo'ish code to explain.

$('#first_dropdown').change(function(         
    // When someone makes a change to the drop down or "selects" something (maybe bind click() too)
    // Your code here to select the value selected and do a ...
    $.post() // post to some PHP script that will return the values that will fill the 2nd  
    // dropdown but it'll be stored in some javascript variable
    // and you're going to add jQuery code to take that js variable to populate the 2nd dropdown
){});

Here is a way to do this

  • create the first dropdown in php and make the second one empty disabled
  • to your first dropdown bind a JS method that is fired onchange
  • in PHP create an entry point that returns you data for your 2nd dropdown, AJAX will use this entry point to fetch data
  • In the JS method you have bound to your first dropdown, use AJAX to fetch data for your 2nd dropdown

Now, you can use jQuery, prototype, yui whatever JS tool kit that fits you. If I were a beginner I would be sending mark up in from server in response to my AJAX call and would replace that markup in dropdown